css3 Icon Logo
me@grafxflow

Written by me@grafxflow

11 Aug, 2010

0

1,307

What does !important mean in CSS?

Just a nice little work around I found out about for ie6 and CSS integration and helps get around CSS validation.

Here is the scenario, I have a button in png format but I have also created a gif version for ie6.

At first the CSS used the underscore (_) solution. Simply put, major browsers other than ie6 and below respect the first line and show the Button.png, but ie6 would see the second and use the Button.gif. Problem is it does not pass CSS validation.

DivContainer {
    background-image:url("Button.png");
    _background-image:url("Button.gif");
}

So to sort this out use the !important as follows and delete the underscore. This works exactly the same as above and passes CSS validation.

DivContainer {
    background-image:url("Button.png") !important;
    background-image:url("Button.gif");
}

Just updated this post to show that there is another trick in CSS target both IE6 and IE7 and that is using the asterisk (*) key.

DivContainer {
    width: 146px;
    *width: 150px; /* For IE7 and IE 6 */
}

Another way to target IE9 or below

DivContainer {
    width: 146px;
    width: 150px\9; /* For IE7 and IE 6 USING \9 */
}
Share This Post

Add comment

Smart Search

119 Following
50 Followers

me@grafxflow

Hull, United Kingdom

I am a Full-stack Developer who also started delving into the world of UX/UI Design a few years back. I blog and tweet to hopefully share a little bit of knowledge that can help others around the web. Thanks for stopping by!

Follow