Question

I have two CSS rules:

.avo-lime-table th,
.avo-lime-table td {  
  background-color: grey;
}

Rule two

.avo-lime {
  background-color: green; 
}

Everything works fine in FireFox, Chrome, Opera and Safari. Obviously Microsoft’s browser (as always) has some diffrent ideas about rendering my page…

<div class="avo-center-shrink">
  <form method="post" action="/someformAction">
    <table class="avo-lime-table">
      <colgroup>
        <col>
        <col>
      </colgroup>
      <thead>
        <tr><th colspan="2" class="avo-lime">Login form heading here</th></tr>
      </thead>
      <tfoot>
        <tr><td colspan="2">submit button here</td>
      </tr></tfoot>    
      <tbody>
        <tr>
          <th class="avo-lime-h unselectable" scope="row">Login:</th>
          <td class="avo-light-h">login input here</td>
        </tr>
      </tbody>
    </table>
  </form>
</div>

In above code I’ve skipped a few ‘s that are not importaint for this example.

How it should look (Firefox):

How it looks (IE9):

Why is the first rule more specific (to IE) than the second one?

How can I fix that in IE? I’ve tried diffrent things:

**.avo-lime, .avo-lime-table th.avo-lime** { background-color: darkgreen; // fallback background color
 //here some gradients }

but It does not work!

EDIT:

OK, it seems that I had to clear browser cache twice, becouse for some reason it did not update CSS file after the first time.

So all answers that avo-lime-table th is more specific than .avo-lime were true, and changeing it to th.avo-lime did the trick.

I’m gonna give everyone a +1 and mark answered the first correct answer.

Answer 1

To your actual problem: remove

filter: progid:dximagetransform.microsoft.gradient(enabled=false);

and it will work just fine in IE9.

About the css-rule precedence:

The rule

.avo-lime-table th

has higher precedence than

.avo-lime

because it contains a class selector and an element selector which is higher than only one class selector. This is not only true for IE but in all other browser too.

To give it a higher precedence change it to

th.avo-lime

Now both rules have the same specificity, but the second rule overrides the first rule by simple cascading (rules declared later in the stylesheet override previous ones)

Read more about css selector specificity to understand this complicated matter.