There are a lot of ways to create a tangled web within your CSS code. Using hacks are probably still at the top of the list, but a very close runner up is the use of the !important declaration within your CSS. (Of course, in a way, it’s a hack too, so I suppose it qualifies for the first.)
I have heard many people say that their site looks twitchy in different browsers … particularly in IE6 and below.
There are many many reasons that could happen, but when it is something as simple as color or font that is rendering differently (where most people seem to use !important), the first thing I check is whether or not there are any !important notes in the CSS.
I’ll tell you my suggestion right now is to avoid using !important altogether. It is so easy to end up making things more complicated with the use of it.
But, let’s assume that you have a site with this problem.
The first thing to check is WHERE you put the !important declaration.
Here is an example using color (not that I think you will actually do this, but it makes it easier to see):
ul#menu li a:link {background-color:olive !important; background-color:pink}
ul#menu li a:visited { background-color:green;}
ul#menu li a:hover {background-color:red}
Don’t laugh! If you don’t do this, count yourself lucky because I have seen many people create CSS rules with duplicate properties with different values. It’s crazy, but it’s also easy to get caught up in the fixing.
Okay, back to the code. Theoretically, it should do a few things:
- Unvisited links should have an olive background.
- Visited links should have a green background.
- And both should have a red background on hover.
Does it work? Of course not.
On Firefox, Opera, Safari, and IE7:
On IE6 and Lower:
Fascinating isn’t it? Of course, the quirky part is that IE6 and lower do the hover affect on both links (as it should), but all the others only do the red hover background on the visited link. Of course, a bigger problem at the moment is that <= IE6 are showing the unvisited link as pink. Well, now, let’s try to see what you could start doing to fix it.
You could try the first technique most people try which is that you should always put your properties with an !important declaration at the end of the rule line to make them work with IE6 and lower.
So, we change the code and put the !important at the end:
ul#menu li a:link { background-color:pink; background-color:olive !important;}
ul#menu li a:visited { background-color:green;}
ul#menu li a:hover {background-color:red}
Now it’s a little better.
On All:
But that hover still doesn’t work correctly. There is a hover affect to red ONLY on the visited link still, and now IE6 isn’t doing the hover on the unvisited link (like it was earlier) – it’s only on the visited just like everyone else.
So, obviously this is a problem, and the first thing that people tend to do when they see this is try making the hover important too!
Change the code to:
ul#menu li a:link { background-color:pink; background-color:olive !important;}
ul#menu li a:visited { background-color:green;}
ul#menu li a:hover {background-color:red !important;}
Did this fix it? Yep. Now all of them render the hover also and show as they should.
Was it worth it?
In my opinion, this is much easier and works perfectly:
ul#menu li a:link { background-color:olive;}
ul#menu li a:visited { background-color:green;}
ul#menu li a:hover {background-color:red;}
But in order for that to work you need to avoid !important. You would have to clear out any duplicate property/value pairs that might be causing you to set something as !important.
Suggestions in Summary:
- If you are going to use !important in your CSS – make it a last resort.
- If you end up using !important – remember to put it last in the rule for <= IE6.
- Try cleaning your code instead.
~Nicole
