IE5 and IE6 CSS Hacks
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 }
http://tantek.com/CSS/Examples/boxmodelhack.html
4 Comments »
RSS feed for comments on this post.
No! You must not support IE5, and supporting single digit percentages for IE6 is bad too. My official professional recommendation is to support 1 version of each browser. So choose, IE6 or IE7, at the beginning of next month though, you’ll need to choose IE7 or IE8 because according to the data I have, IE6 will be third among them.
Another great resource for this is:
http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
Also, it appears that IE6 and IE5 both add a huge amount of space below or above an “a” element when you add the rule “display:block”.
This came up when I had a vertical css menu based around ul and a elements.
It works fine in all browsers, but IE6 and IE5.
The solution is to use: “display: inline-block; ” instead.
This removes the inherit width that you’d see otherwise, but you can easily set the width explicitly and it should work then.
If you’re using the above “display:inline-block;” keep in mind that Firefox 2 and earlier don’t support it. To get around this, also use a Mozilla specific css rule:
“display: -moz-inline-box;”
This acts similarly with the caveat that it hides all overflow text.
To get around this, put a div tag within the a element and specify a specific width for this tag.
And…. finally we have a good solution.