Two CSS rules are in place:
.avo-lime-table th,
.avo-lime-table td {
background-color: grey;
}
Next rule:
.avo-lime {
background-color: green;
}
All is functioning correctly in FireFox, Chrome, Opera and Safari. However, as usual, Microsoft's browser has its own way of rendering the 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 the above code, some irrelevant elements have been omitted.
Desired appearance in Firefox:
Actual display in IE9:
Why does the first rule take precedence over the second (in IE)?
How can this be corrected for IE? Various solutions have been attempted:
**.avo-lime, .avo-lime-table th.avo-lime** { background-color: darkgreen; // fallback background color
//here some gradients }
Unfortunately, these attempts have not yielded success!
EDIT:
Upon clearing the browser cache twice, the CSS file finally updated properly after the first attempt was unsuccessful.
Therefore, it is confirmed that avo-lime-table th takes precedence over .avo-lime, and changing it to th.avo-lime resolved the issue.
A +1 will be awarded to all who provided assistance, with the correct answer being selected as the marked solution.