help on css from joomla

[rogerl_uk]

I am experimenting with the Joomla CMS and looking at one of the example cascading style sheets found this bit of code

#maincol-normal-800{
float: left;
width: 450px !important;
margin-left: 0px !important;
margin-left: -5px;
width: 446px;
}

I am confused by it containing two lines for the width property and two lines for the margin-left property.

Can anyone tell me why there are two lines for each property , and in each case which takes precedence?

[eriksmoen]

Source: http://www.evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369/

4. !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.

(Many of you may also be aware of the CSS child selector, the contents of which IE ignores.)

[bpat1434]

It's a prettier IE hack. there are other IE hacks like:

#dummy {
    width: 305px;
}

/* IE HACK \*/
#dummy {
    width: 300px;
}
/**/

The above code (which has all browsers using 300px width except IE which will use 305px, can be rewritten to be:

#dummy {
    width: 300px !important;
    width: 305px;
}