5 replies [Last post]
nanacss
nanacss's picture
Offline
Enthusiast
Last seen: 6 years 40 weeks ago
Timezone: GMT+8
Joined: 2007-07-27
Posts: 107
Points: 22

Hi there,

I use the css reset and make the div i want. However I dun understand the calculation here:

css:

body {
	min-width: 1000px;
	text-align: center;
}
 
.wrapper {
	width: 960px;
	margin: 0 auto;
	padding: 10px;
	text-align: left;
	background: pink;
}
 
header {
	width: 940px;
	padding: 10px;
	background: red;
}

html:

<div class="wrapper"><!-- not needed? up to you: <a href="http://camendesign.com/code/developpeurs_sans_frontieres" rel="nofollow">http://camendesign.com/code/developpeurs_sans_frontieres</a> -->
 
	<header>
 
		<h1><a href="/">Page Title</a></h1>
 
		<p>Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec se mp er quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhonc us suscipit, sem dia m ultr ices mau ris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapi en. Phas ell us quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero. Morbi eu porttitor ipsum. Nullam lorem nisi, posuere.</p>
 
	</header>
 
</div>

my doubts are:
1 - how come the total wrapper width is not 980? cos width + padding = 980px (pink color bg)
2 - how come the total header width is not 960? cos width + padding = 960px (red color bg)

please advice.

demo:
http://webwhalenews.com/test1/index.html

真诚清静平等真觉慈悲,看破放下自在随缘念佛。
name: WEN YU
my blog: http://webwhalenews.com
my collection: http://gtoystage.com

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 4 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9766
Points: 3848

Why use the reset?

This is causing your confusion:

* {
  -moz-box-sizing: border-box;
  }
It's line 2 of style.css.

There is no rationale for a global reset. None! Your best bet is to simply remove that silliness and undo any adjustments you've made because of it. Also, get rid of reset.css and its stupidity. See Global resets considered harmful.

The comment on box-sizing, "Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/", indicates the author grew up with standards non-compliant IE, and has failed to be at home with W3C recommendations. It also is symptomatic of a print oriented graphic designer, people with little understanding of the dynamic nature of even the simplest of web pages.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

nanacss
nanacss's picture
Offline
Enthusiast
Last seen: 6 years 40 weeks ago
Timezone: GMT+8
Joined: 2007-07-27
Posts: 107
Points: 22

Hi Gary!!! Thank you so so

Hi Gary!!!

Thank you so so much for your info! It really helps me a lot about the "reset" things.

All my confusions are fixed now Laughing out loud

Much appreciate it! <3

Big smile

真诚清静平等真觉慈悲,看破放下自在随缘念佛。
name: WEN YU
my blog: http://webwhalenews.com
my collection: http://gtoystage.com

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

@Gary Sadly this is a chap

@Gary Sadly this is a chap I've seen quoted often now, those that look for quick easy answers and hate to have to learn, latch on to anyone who says "hey it's all easy just do this" set ALL elements to border box, how's that frigging work? and yes it's all about the flaming print paradigm as it's often paired up with Grids as being a reason to use it.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 4 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9766
Points: 3848

Thanks, Hugo

Yeah, grids are the likely ab ovo for that silliness. Grids are so distant from best practice as to be off my radar.

It occurs to me that MSFT might have lifted IE's original (border) box model from Word, which is a print application. I mean, remember hasLayout? (as if anyone who's been around a while could forget) It was also taken from desktop applications rather than being properly coded to render new block formatting contexts per the standards.

@nanacss: There are a lot of poor practices being flogged on the 'net, and anyone new to html and css will lack the historical perspective necessary to separate the good from the bad. I am happy that I could extend your understanding of the issues, if only a little.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

nanacss
nanacss's picture
Offline
Enthusiast
Last seen: 6 years 40 weeks ago
Timezone: GMT+8
Joined: 2007-07-27
Posts: 107
Points: 22

Hi Gary & Hugo, Thank you

Hi Gary & Hugo,

Thank you very much Smile

It really helps. Smile

真诚清静平等真觉慈悲,看破放下自在随缘念佛。
name: WEN YU
my blog: http://webwhalenews.com
my collection: http://gtoystage.com