Home/ Questions/Q 531691
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T09:19:38+00:00

I have some pretty simple HTML and CSS that doesn’t work in Internet Explorer

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0