Webform css stylesheet overriding my css file

Question

I am using drupal 6.25 with webforms 6.17 and conditional stylesheets 6.12 and am noticing that the webform style.css file is overriding my IE7style.css file even though the IE7style.css file appears after the webform stylesheet when I view the source in IE7.

It makes no difference if I have css caching turned on or off - the result is the same.

Here is the relevant line in IE7style.css

.webform-container-inline .form-item {
    display: block;
}

Here is the line in webform's sytel.css it should be overriding

.webform-container-inline DIV.form-item {
    display: block;
 }

How is this possible and more importantly how do I fix it???

Answer 1

The 'div' in the webform's CSS makes it more specific than your CSS in IE7styles.css, thus overriding your styles. You should copy the CSS selector from the webform module's CSS exactly if you want to override it with a style in a file later in the cascade.

Here is a good article on general traits of CSS specificity and inheritance.