For nested boxes IE doesn't add the outer box padding and the inner box margin, as all other browsers do.
Test page Workaround is not included
Reported by: Daniel Bleisch.
Explorer 5-6 Windows, Explorer 7 | Reported on 26 January 2005.
This site is no longer maintained. I’m sorry, but it’s just too much work for too little return. You can continue to browse old bug reports, though.
Search reports by browser:
2 Posted by Gérard Talbot on 3 July 2005 | Permalink
I believe the bug disappears (in MSIE 6) if you remove width:360px. In other words, the layout of the s were overconstrained to begin with.
3 Posted by bjudson on 29 May 2008 | Permalink
The best solution I could come up with is to insert an empty div (with margin & padding set to 0px) above the nested div. It's kind of ugly code, but it works. (PS IE6 will give the empty div a certain height unless you put a comment into it...)
1 Posted by Vesa Piittinen on 26 January 2005 | Permalink
To be more specific, IE seems to misbehave with top padding only. A workaround to this is to have a layer, for example and then add a separate stylesheet for IE using a conditional comment ( http://www.quirksmode.org/css/condcom.html ). You also must have font-size : 1px; in the style for the padding fix if the height is smaller than the size of font (because IE thinks minimum height for a layer is the size of the font).
You can see this tip in practical use at http://firefox.maayas.net (see div.img-header).
CSS files to check out (as there are many CSS files used in the page):
http://firefox.maayas.net/tutuksi.css
http://firefox.maayas.net/tutuksi-ie.css