Blog

11 Aug
2010

css3 Icon Logo

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 */
}
Posted in: < PHP and HTML and CSS >
me@grafxflow avatar

me@grafxflow


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!


Add comment

Add comment