The Dopefly Tech Blog

<< The Dopefly Tech Blog Main page

IE layout problems fixed

posted under category: Standards on October 4, 2006 at 1:00 am by MrNate

If you saw this site in the last couple days with IE6, you saw the box model problem they always talk about. I liberally use padding in my stylesheets. Padding, of course, is the space between the border of an area and the content within that area. When you specify a width and a padding size, you are supposed to subtract the width of that padding (on each side), and your margins and borders to get the size of your area. However, IE6 doesn't really abide by this law.

It's a fairly simple fix, thankfully.

div#content {
padding:0 25px;
width:500px;
}
html>body div#content {
width:450px;
}
The more specific html>body rule overrides the cascading width for browsers who know how to obey rules.

Too old to comment!
On Oct 4, 2006 at 1:00 AM Sandy Clark (slclark who spends every waking moment visiting shayna.com) said:
You have the xml prolog <?xml version="1.0" encoding="utf-8"?> before the DocType. This throws IE6 into Quirks rendering mode which uses the broken box model.

If you get rid of the prolog then IE6 will render in Standards mode and will use the standard compliant box model which is the correct one and you won't need your fix anymore either.
On Oct 4, 2006 at 1:00 AM Nathan Strutz (http://www.dopefly.com/) said:
Well that did it. So what does the xml prolog do for me?
On Oct 4, 2006 at 1:00 AM Sandra Clark (slclark who dances with shayna.com) said:
At this point, nothing. Standards-wise, the xml prolog is supposed to be above the DoctType, but it doesn't hurt in any browser to not have it there.

IE7 has removed the issue, but until IE6 goes away (and we know how long i t took for IE4 and IE5 to go away), its still better not to have the prolog there.
On Oct 4, 2006 at 1:00 AM Nathan Strutz (http://www.dopefly.com/) said:
Awesome, thanks Sandy! You're the best.
On Oct 5, 2006 at 1:00 AM Paul Roe (paul.roe at the ever-endearing gmail.com) said:
Nice redesign dude!
Too old to comment!