0

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???

2
  • Sounds like an issue of CSS specificity. Can you post the relevant CSS used by the Webform module and your IE7style.css file?
    – sheena_d
    Mar 13 '12 at 23:16
  • Looks like you are correct. The webform css file has a DIV.form-item while mine does not. Thanks for cluing me in to that!
    – user5013
    Mar 13 '12 at 23:29
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.