CODEWITHSUNDEEP
cssinternet-explorerstylesinternet-explorer-6
user1091156
user1091156

Reputation: 249

Internet Explorer 6 css order matters bug

After maybe all day I explore new bug (for me) in IE6. Order of css styles matters. The style work only for the first child ( in css file, not in element). It's hard to explain, but the examples will show you what I mean.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
    #container #p.one
    {
        position: absolute;
        left:50%;
        width: 20px;
        height: 20px;
        background: green;
    }
    #container #p.two
    {
        position: absolute;
        left:50%;
        width: 20px;
        height: 20px;
        background: green;
    }
    #container
    {
        position: absolute;
        z-index: 500;
        width: 100%;
        height: 100%;
    }
    </style>
</head>
<body>
    <div id="container">
        <div id="p" class="one">123</div> <!-- change class "one" with "two" -->
    </div>
</body>

So, if you change the class "one" with class "two", the div will lose the style. Style one and two are exactly the same.

But if you change :

<div id="p" class="one">

with

<div id="p" class="two">

and change the style from:

    #container #p.one
    {
        position: absolute;
        left:50%;
        width: 20px;
        height: 20px;
        background: green;
    }
    #container #p.two
    {
        position: absolute;
        left:50%;
        width: 20px;
        height: 20px;
        background: green;
    }
    #container
    {
        position: absolute;
        z-index: 500;
        width: 100%;
        height: 100%;
    }

to:

    #container #p.two
    {
        position: absolute;
        left:50%;
        width: 20px;
        height: 20px;
        background: green;
    }
    #container #p.one
    {
        position: absolute;
        left:50%;
        width: 20px;
        height: 20px;
        background: green;
    }
    #container
    {
        position: absolute;
        z-index: 500;
        width: 100%;
        height: 100%;
    }

Just swap class "one" with class "two" Class "two" will work, but "one" not. How to fix this or it is impossible?

Upvotes: 0

Views: 91

Answers (2)

Knu
Knu

Reputation: 15134

This is a known IE6 bug. It will ignore every #id.class but the first.

Upvotes: 4

Mat Richardson
Mat Richardson

Reputation: 3606

I don't understand why you are using IDs and classes together in your css rules.. By their very nature, IDs can/should refer to only one element in the page, so #p.two and #p.one should really only be #p???

Upvotes: 0

Related Questions