CSS background-color on table td displaying incorrectly in Internet Explorer 6

StackOverflow https://stackoverflow.com/questions/2014353

Question

I have some pretty simple HTML and CSS that doesn't work in Internet Explorer 6.

<!DOCTYPE HTML>
<html>
    <head>
        <style>        
            table td.one.read {background-color:#FFD700;}
            table td.two.read {background-color:#0000ff;}
            table td.three.read {background-color:#ff8c00;}
        </style>
    </head>

    <body>
        <table>
            <tr class="head">
                <td></td>
                <td class='one read'>one</td>
                <td class='two read'>two</td>
                <td class='three read'>three</td>
            </tr>

            <tr>
                <td>Legend</td>
                <td class='one read'>1</td>
                <td class='two read'>2</td>
                <td class='three read'>3</td>
            </tr>
        </table>
    </body>
</html>

A simple table that has different background colors for each column. I've removed a bunch of other CSS/HTML to keep things simple. The problem is all the columns show up as the same orange color in Internet Explorer 6, works fine in Firefox.

How can I make it work?

Was it helpful?

Solution

This is a bug in IE6.

If you have a CSS selector with multiple class names (eg, .three.read), IE6 will ignore all of the class names except the last one.

Therefore, IE6 sees three CSS rules for the selector table td.read.

To solve this, you can combine your classes. (eg, <td class='OneRead'> and table td.OneRead {background-color:#FFD700;})

OTHER TIPS

Multiple classes are not supported in IE6, have to wait a few more years before IE6 dies. For now though, you can create separate classes for colors.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top