mdibb.net

Generic cross-browser CSS hacks

Having read my page about conditional CSS statements to get around some browser quirks, Jamie Nicol sent me an email with a couple of very simple and elegant generic hacks you can use to give IE one set of CSS statements, and everything else another set of CSS statements. There are a lot of wierd and wonderful CSS hacks out there to get IE and other browsers to render pages how the author wanted them - what struck me about these two though was their simplicity and flexibility.

The Underscore Hack

The Underscore Hack is a useful little trick to use if you just want to have one or two differences in one of your CSS statements, such as silly little differences like margins and spacing and so on. Its really very simple - you just stick an underscore character (thats a _ if you didn't know) before the statement we want to be seen by IE only, e.g.:
body {
color : #000000;
padding : 5px;
margin-top : 15px;
_margin-top: 17px;
}
In this example we see a CSS statement to define the styling for the body tag. Pretty standard stuff really - we set the fore ground colour, say we want 5 pixels of padding, and then define the size of the top margin. All browsers will read the first of the two margin-top lines and set the top margin to be 15 pixels. The line starting with the underscore is ignored by all browsers except IE, so IE will accept the new value of 17 pixels. Its important to point out here that the ordering is important - make sure you use this hack after the statement that describes the normal values, otherwise IE will just use the normal value.

The Star HTML Hack

The second hack I'm talking about here is more useful if you have significant differences in your CSS, and not just one or two trivial little changes. The Star HTML Hack is best suited for when you have an entire new statement to use for IE. Lets look at an example:

body {
color : #000000;
.
.
.
}

* html body {
color : #000000;
.
.
.
}
Here we have two CSS statements used to define a style for the body tag (I've not shown the full content of each statement as its not important). Note the asterix at the start of the second statement - thats the star! The first of the two will be used by all browsers, but they will ignore the second statement. IE on the otherhand will read both. Due to the ordering, IE will use the second statement when rendering the page.

Combine these two tricks together and you've got a fairly useful and general purpose set of hacks you can use to get your pages displaying as you want without the argy-bargy usually associated with cross-browser CSS coding!

Back 23.02.2006.