Search code examples
htmlcsshtml-tablebackground-colorinternet-explorer-6

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

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?

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;})