!important CSS hack

Ever looked at a Cascading Style Sheet (CSS) and wondered why all the !important declarations all over the place?

Well, I was creating some stylesheets the other day for a site and was getting exceedingly frustrated with the cross-browser compatibility issues. Although I was writing clean HTML, accessible & standards-compliant, the difference in layout between Internet Explorer and Firefox was quite annoying.

The pixel-perfect design was great in Firefox, but when I checked the layout in IE it was "out". This is apparently all to do with IE's misinterpretation of CSS and therefore you have to like it, lump it, or hack it!

So, these !important declarations?

Historically they exist to ensure that author's styles take precedence over user's styles, you can take a more in-depth look over at W3 about !important rules. But in my CSS case they are also useful to differentiate styles between proper standards-compliant browsers and IE.

You see, IE can't handle or understand the !important declaration so CSS coders use it to help out.

In my CSS I wanted a fixed-width element which was skewed in IE by around 9px including all the other padding, margin elements etc. So to cure this I inserted the lines into my stylesheet...

width: 115px !important;
width: 124px;

What does this do?

All compliant browsers will read the first line, see it as important and display a 115px wide element.

IE doesn't understand the !important declaration so it moves onto the next line and displays a 124px width element.

Easy Huh?

And why did I make all those declarations bold and red? Well, that's what you get from being a life-long user of TopStyle Pro ;)