Weekly CSS Trick: The IE underscore hack
July 24th, 2007 by Dustin Brewer
This week it is a hack that I am providing for everyone to enjoy, it allows you to easily add a quick style within your existing style sheet to target internet explorer. This can help so you don’t have to check your ie CSS file if is just a simple margin adjustment. Which as we all know internet explorer has some issues with, especially internet explorer 6. The underscore hack is pretty basic but I will go over the various uses for it and touch on what browsers it affects and which browsers ignore it.It used to be that underscores were illegal within CSS but since CSS 2.1 was released it is now accepted. Basically Internet Explorer will ignore the underscore and accept it as a regular CSS expression where as other browsers will ignore any CSS expressions that have an underscore in them. This makes a very quick and easy way to target internet explorer without any difficulty at all.
The browsers that are affected by this are IE6 and IE7, because IE5 adheres to older CSS specifications it actually ignores the underscore.
Listed below is an example of its use.
#element {height: 280px; _height: 280px;}
It is quite basic but can come in very handy for an easy alteration to target IE browsers when you only need to change some small information. This method is of course not recommended for any extended IE manipulations because you should use the [if ie] method for major changes. The reason for this is that you can separate your CSS out and take full advantage of style and structure separation.
Next week I will go over some ways to ensure that your divs are wrapping around your content and not stopping half way short. This can be a huge pain if your background color or image isn’t going to the bottom of your content. I have had this issue a few times in the past and at first it can be frustrating to discover the root cause.
Popularity: 5%
July 24th, 2007
Simple and to the point, I was actually searching for the trick to getcontent to wrap in a pinch.. the trick on the bottom paragraph.
January 24th, 2008
Very cool. Simple and useful. Thanks for sharing.
August 11th, 2008
I swear by this hack. It’s fast, simple, and easy to use. If you’re going to be doing extensive IE hacking, I would recommend using a condition if statement instead, otherwise you’ll have a tonne of redundant code that will mess up your perfect, valid css document when you run it through the W3C validator.