!important on CSS

Friday, June 6, 2008

When a css rule is specified two or more in a document, browser will use the last one. So if we have code like this

body{
text-align: center;
text-align: justify
}
The browser will make text alignment inside the body to be justified. Overriding the text-align: center; part before. With !important, you can define a rules without having to worry some other rules will override it. So if you make the code like this
body{
text-align: center !important;
text-align: justify
}
The text alignment inside the body will be centered, even when it's defined justify on the line below it.

But here comes the best part..

IE6 and the previous versions ignores the !important code (IE7 doesn't ignore it though.)

But you'll survive, I know I did.

Todo so, you have to use the !important code to avoid non-standard CSS expressions. Here's a classic example of how to specify max/min width with IE6> and other browser. As you may know, IE6 doesn't support the max-width declaration.
body {
margin: 0 auto 0;
max-width: 800px;
min-width: 600px;
width:auto !important;
width:800px;
}
It may not solve the problem entirely, but IMHO, it's better than using non-standard code for IE6 like _width or _height. Happy coding

0 comments: