CSS Underscore Hack: Using the Underscore to Isolate IE Styles

How do we keep this site running? This post may contain affiliate links — the cost is the same to you, but we get a referral fee. Compensation does not affect rankings. Thanks!

CSS and mouseBrowsers are not very reliable in their consistency of reading and interpreting styles. Most of the time, this is an annoyance. However, at times it can be used to our advantage. In this case, we will be exploiting Internet Explorer’s (IE’s) lack of conforming to CSS standards. Standards conforming browsers read only valid CSS (there is no browser that I know of that is 100% standards conforming, although some, such as Mozilla Firefox, come close). So, for example, they would not interpret CSS declarations appended by an underscore:

p { background-color: white; _background-color: black; }

IE, however, goes ahead and skips right over the underscore and proceeds to interpret the declaration. This results in IE’s background color changing to black, while it remains white in more standards conforming browsers.

Alternative Solution for IE’s Min-Height Problem

In combination with the IE overflow bug, this technique provides one solution for IE’s lack of support for the min-height property:

#main { height: auto; min-height: 25em; _height: 25em; }

What it does: This code basically tells IE to adjust the height of #main accordingly, without falling below 400px. Most other browsers recognize the min-height property, which takes care of itself.

Implementing Min-Height with Valid Code

Since the use of the underscore in the methods above is not considered valid style, I am going to provide another method of the above “min-height” hack with valid code:

#main { height: 25em; min-height: 25em; }
html>body #main { height: auto; min-height: 25em; }

How it works: The html>body statement is ignored by IE, which allows the height to be redefined as auto while other browsers rely on the min-height property.

Alex bring a series of in-depth articles on search marketing and content management systems as well as troubleshooting tips to We Rock Your Web's collection. He is an avid tennis player, nature enthusiast, and hiker, and enjoys spending time with his wife, friends, and dogs, Bella and Lily.

Leave a Reply

Be the First to Comment!

avatar
wpDiscuz

Send this to a friend