views:

546

answers:

2

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?

+5  A: 

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

SLaks
awesome...thanks for the help...good ol' IE6
John Duff
+1  A: 

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.

Nimbuz
You mean until IE **6** dies. In IE7, it should work fine.
SLaks
Should being a keyword...
David