CSS Underscore Hack

Using the Underscore to Isolate IE Styles

Browsers 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.