Recently while trying to finish up a new wp theme I had a mega problem with an < H2 > heading’s margin which I placed above an unordered list. Firefox displayed this perfectly but IE just did not want to work with the margins I had set for the elements.
I’ve actually been sitting here since around midnight central time trying to figure out how to get around this. Sad that it took me that long yes but that’s how I learn. Searching till my eyes want to pop out then doing so just a little more trying everything that is suggested.
Which caused me to stumble upon “!important” and I can not believe how simple the fix really was.
Better explainations on what “!important” is and how to use it can be found in the link at the bottom of this post..
Basically for my needs this evening I needed firefox to display a margin of 5px but needed IE to display that same margin in -10px to line up correctly.
Enter the “!important” –
Setting up my element class like so allowed me to get the exact display I needed to work in both FireFox and IE.
margin-left: 5px !important ; //This one for FF//
margin-left: -10px ; // This one for IE//
The result was a perfectly placed element exactly where I wanted it. From what I can understand at 4:56am after sitting here all night is that “!important” being placed in there lets the standard browsers see it first. It then pretty much ignores the second line. But IE ignores the first line but sees and understands the second line without the “!important” in the line. Make any sense? Probably not as I’m terrible at explaining things. I was just so excited that I had to share my new found css trick hack what ever you call it with you guys.
Please see the explanation below for a sane person’s explanation of what the “!important” bit actually is and does.
Taken From: http://www.evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369/
!important ignored by IE
Normally in CSS whichever rule is specified last takes precedence. However if you use !important after a command then this CSS command will take precedence regardless of what appears after it. This is true for all browsers except IE. An example of this would be:
margin-top: 3.5em !important; margin-top: 2em
So, the top margin will be set to 3.5em for all browsers except IE, which will have a top margin of 2em. This can sometimes come in useful, especially when using relative margins (such as in this example) as these can display slightly differently between IE and other browsers.
