2 replies [Last post]
flock
Offline
newbie
Last seen: 16 years 42 weeks ago
Joined: 2004-07-20
Posts: 2
Points: 0

Hi there!

After drawing my first CSS website (I am not a web designer), I noticed that IE draws borders and padding in the boxes while Mozilla based browsers draw them out. For example if I have a 6x6 box with a border or padding with thickness 1, my box ends up with only 4x4 space inside on IE and the overall space occupied by the box never changes since the borders or padding are drawn inside the box (this approach makes it easier to design web pages, in my humble opinion), although in Mozilla, I end up with a box which still has 6x6 space inside, but due to the borders/padding has now grown to 8x8 (which makes things harder when writing the stylesheet).

After reading through the W3C's specification, I've learned that IE is wrong about the padding (which according to them must be drawn outside the boxes), but I didn't see anything in the specification regarding borders...

Does anyone know which implementation is right?

Currently (and since the website is all php-based), I am using the remote User-agent to figure out which browser users are running and feeding them with the corresponding stylesheet, but I would like to avoid this.

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

Border direction

Hi flock,
This is the infamous box model implementation problem and in my view
IE got it right in their original method with padding and borders being part of the internal dimensions of a box ( makes far more sense to my mind!) but since IE6 they have conformed to the W3C spec.
If your having a problem with sizing it may be that you havn't got a correct DTD on your page and IE6 may be rendering pages in Quirks mode. IE 5+ on the other hand will allways render the box model incorrectly and a hack is useally used to feed a different width to IE5+

this is the Voice family hack which may help (taken from Blue Robot.com)

#Header {
	margin:50px 0px 10px 0px;
	padding:17px 0px 0px 20px;
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height:33px; /* 14px + 17px + 2px = 33px */
	border-style:solid;
	border-color:black;
	border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
	line-height:11px;
	background-color:#eee;

/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
declaration. The incorrect IE5/Win value is above, while the correct value is 
below. See http://glish.com/css/hacks.asp for details. */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:14px; /* the correct height */
	}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct 
length values to user agents that exhibit the parsing error exploited above yet get 
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#Header {height:14px;}

Hope that's of some help you shouldn't need to feed seperate sheets for this problem and yes the border has to taken into account as you can see!

Hugo.

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

flock
Offline
newbie
Last seen: 16 years 42 weeks ago
Joined: 2004-07-20
Posts: 2
Points: 0

Nice one

That's a really nice hack! Fix a bug with another bug! Thanks man!