Monday, October 15, 2007

The importance of being !important

I recently came across an interesting rendering bug which made me require the !important rule in CSS.

The problem was that although the style worked properly in all current versions of all of the major browsers, Internet Explorer 7, FireFox 2.0 & Safari 3.0.3, there was a border displaying in Internet Explorer 6 that should not have been there.

The style sheet clearly said that the border on the element should have been transparent, but it wasn't.
The solution was to declare the border twice;

border:solid 1px transparent !important;
border:solid 1px white;
/* required for IE6 to display correctly */
All of the modern browsers recognise the !important rule and use it in preference of the second declaration whilst Internet Explorer 6 simply uses the second declaration. A pain in the arse, but it works and hopefully this will save someone else the hassle of figuring it out.



Anonymous Anonymous said...

Realized it was your birthday yesterday.
only back online today


17/10/07 04:53  

Post a Comment

<< Home