There’s some valuable information on ther web about CSS and the various bugs going around with the different browsers. For me this was always a big issue. So I would turn to Pookey and he would fix it. As easy as it was, I couldn’t help feeling I had to figure this out for myself!
For those who are unfamiliar with the “Double-Margin Bug”, if you float an element and then procede to add margins in the same direction as the float, Internet Explorer 6 will double the value. For example, A left margin of “10px” becomes “20px” in IE6. Well how do you fix this?
Why not try the underscore hack?
The Underscore Hack is a useful looking CSS hack. IE/Win ignores an underscore (_) at the beginning of any CSS property name, interpreting the declaration as if the underscore wasn’t there. Other browsers do not recognise the property and ignore the declaration.
#sidebar {
position: fixed;
_position: absolute;
}
Modern browsers will cycle through these properties. When they come to the underscore, they’ll skip the style entirely. On the flip side, IE6 will ignore the underscore and implement the new margins.
In addition to this there are other ways to avoid this. Such as…
Change The Display To Inline
The easiest solution, change the display property of your element.
#floatElement {
display: inline;
float: left;
margin-left: 100px;
}
Use Conditional Comments
Use conditional Comments to target different web browsers.
!–[if lt IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie6.css” />
<![endif]–>
In layman’s terms, this code is saying, “If a visitor to your page is using Internet Explorer 6 or lower, import a stylesheet called “ie6.css”. As a result, modern browsers will ignore this statement. IE 6 and below, on the other hand, will implement the file. Now, in our ie6.css file, we’ll need to add some override styling.
#floatElement {
float: left;
margin-left: 50px;
}
Since we know that IE 6 will double the margins on floated elements, if we reduce the value of the margin by 50%, it will fix our document. This method is particularly appropriate when you have many styles that are targeting IE6 directly. It’s important to contain all of your “hacks” in a centralized location.
Tips, courtesy of Net Tuts and The Underscore Hack
