I recently had a problem where I had to make a tweak in the CSS just for IE6. I couldn’t find any way to conditionally compile in the .css standalone file and I didn’t want to create a whole new .css file just for IE6 and conditionally compile it in. Anyway, in IE6 I was getting a gap of 3 pixels between two divs that contained images. The solution I found was to take advantage of the way IE6 has a CSS node above HTML when its in standard mode. So I could write
* html div#fixforie6 { margin-right: -3px; }
And that only made the change in IE6 (out of IE6, IE7, and FF2 which are my target browsers).
The full code for the example is here.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>IE6 CSS fix</title>
<style type="text/css">
div {
margin: 0;
padding: 0;
border: 0;
}
div#clear { clear: both; }
div.float-left {
float: left;
}
* html div#fixforie6 {
margin-right: -3px;
}
</style>
</head>
<body>
<div class="float-left"><img src="http://www.exfer.net/test/images/MenuTopLeft.gif"/></div>
<div><img src="http://www.exfer.net/test/images/MenuTopRight.gif"/></div>
<div id="clear"/>
<div id="fixforie6" class="float-left"><img src="http://www.exfer.net/test/images/MenuTopLeft.gif"/></div>
<div><img src="http://www.exfer.net/test/images/MenuTopRight.gif"/></div>
</body>
</html>
And a link to the code is here so you can check it out in the different browsers.
Post a Comment