This is !important · Monday November 21, 2005 by Gerhard Lazu
Rich kids tend to have bad manners. IE (Internet Explorer) subscribes to this concept. It defiantly ignores things that we, the designers, insist on being !important and it keeps misinterpreting our CSS indications (unless we force the hasLayout property).
Let’s look on the bright side. IE’s way of disregarding !important things can work in our advantage. Consider the following code:
#footer {
padding: 10px 0 40px 0 !important;
padding: 10px 0 0 0;
}
Every web standards compliant browser will give the #footer div a bottom-padding of 40px while IE will go with the 2nd rule, and namely give #footer a top-padding of 10px and everything else 0.
If you are following me, it means that you understand how much hassle this little trick can save us (and I am not thinking only about the box model – alternate images e.g. PNGs, alternate styling etc. etc.). To be honest with you, I have ditched alternate stylesheets for IE because this approach saves the day.
As an extra tip, if the styling is still playing up, specify a height: 1px; or height: 1%; to force the hasLayout property in IE. If you want to find out more, check out Ingo’s extensive article on hasLayout.
I would like to mention that I first found out about the !important trick while reading about CSS Drop Shadows on Alistapart (a cracking resource for web designers & devs).
More CSS tips & tricks coming soon ; ).
<< TXP admin search mod ... Where was your Mac and/or iPod built? >>