Wow! That was annoying. As most know, IE5 and IE6 both tend to misinterpret standard CSS forcing us to resort to hacks designed to make them comply and display correctly.
I just recently found two very useful resources when it comes to making div tags float and pad correctly:
First explains and gives a fix for the odd fact that IE5 and IE6 will double the left margin of an element that has a float:left in it.
The fix is awesomely simple. You just set display:inline;.
http://www.positioniseverything.net/explorer/doubled-margin.html
The other explains gives a fix for the fact that IE5 and IE6 treat padding differently. Per CSS specifications, padding should add to the overall width. So, if you have a 100px div tag with 20px padding on all sides, it should be 140px wide.
The previous versions of IE keep the width exactly and simply pad inward rather than outward. All fine and dandy, except all other browsers don’t.
This is a bit more complicated, here’s the overall hack:
div.content {
width:400px;
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}
/* CSS1 UAs should see and use 2nd width */
html>body .content { width:300px }