Today I learned how to do some Internet Explorer hacks to deal with differences in how Cascading Style Sheets are handled in other browsers and Internet Explorer. The problem I ran into is that I wanted to absolutely position a graphic but the distance from the top must be greater for Internet Explorer than it is for Firefox, Netscape, and Opera.
The first hack I learned is to use an underscore for the IE style property which is ignored by other browsers but overrides the preceeding property value in IE:
top: 1605px;
/* IE Hack */
_top: 1775px;
The second hack I learned is Internet Explorer conditional comments but this did not seem to work very well:
<!--[if IE]>
top: 1775px;
< ![endif]-->
The third hack is necessary for Internet Explorer 7 which no longer supports the underscore hack. Internet Explorer 7 understands the child selector command:
html>body #wheels-bottom {
position: absolute;
top: 1775px;
left: 600px;
}
Unfortunately, I have a problem because Firefox, Netscape, and Opera also support the child selector command so while it won’t effect earlier versions of Internet Explorer it does override the style for the other browsers.
