Update: note that this article is from 2003. The CSS hack described is outdated and shouldn’t be used.
I learned another CSS hack today – the underscore hack. You can read all about it in detail, but in essence it’s very simple.
Browsers are supposed to simply ignore CSS properties that they don’t understand. This much should be obvious. However, IE/Win does its usual trick of trying too hard to cope with user error and will read and process any valid CSS property with an underscore tacked on to the front. All other browsers will ignore the mystery property. Example:
p{
color: black;
_color: blue;
}All browsers save IE/Win will display the paragraph text as black – IE/Win displays it as blue. It reads the _color property and allows it to replace the one that came before.
I discovered this technique whilst looking for a solution to IE’s lack of support for min-height to specify the minimum height of an object. Decent browsers like Mozilla support this property, but IE doesn’t. Thanks to another IE bug (one that results in overflow being treated strangely), it’s possible to set a minimum height for both IE and proper browsers in a fashion such as this:
div#content{
height: auto;
min-height: 400px;
_height: 400px;
}Not a new technique, but new to me, and helped me out of a layout problem. Be sure to read Simon’s discussion of the pros and cons. With the appropriate care, it’s a useful tool to add to your hack list.
Comments
Is there a good site that keeps track of all these CSS hacks?
Just imagine MS making all their pages render white on white for anyone not using IE. ;0)
Having said that, I love the underscore hack. I’ve already used it in several sites. The only problem is that, even though it’s proper CSS, the W3C’s validator doesn’t read it as such. So, some may mistakingly think your code doesn’t validate, but there are certainly worse problems than that.
#sidebar {
width: 20%;
min-width: 100px;
}
translated automagically into
#sidebar {
width: 20%;
_width: 19.9%; /* fix IE6 flicker */
min-width: 100px;
_width: expression(yadayadayada); /* IE5 min-width hack */
}
We could treat CSS as an output format! Run it through a compiler before it’s used!
What a bloody awful idea. Forget I spoke...
w\\idth: 19.9%; /* fix IE6 flicker */of course. Not that it would matter since the next one would override it... See how stupid these hacks get?I guess it does send the wrong message though.
Hahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahaha (breath in) (breath out) Hahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahaha
Jesse, you kill me man… really you kill me!
@
.quotebox {
background-image: url(stucture/images/sidebar_quotebox.gif);
background-position: top center;
background-repeat: no-repeat;
min-height: 96px;
height: 96px;
padding: 15px 25px 0px 20px;
}
html>body .quotebox {
height: auto;
min-height: 96px;
}
@
IE ignors html>body .quotebox { so i can redefine height as auto (back to normal) and let the real browsers use the min-height as they should
because of ie i have now been up working on my website project for an additional 8 hours, im tired and bored. if it works in firefox and safari im happy, but i guess everyone uses ie. even on a mac too, absolute madness.
i really hope i get this underscore thing to work… thanks for the tip
Thanks Drew, much appreciated.