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?
This is a known IE6 bug. It will ignore every
#id.classbut the first.