Bugs in IE: dotted border and z-index

[lauthiamkok]

Hi,

Why does IE (I am on IE7) behave so odd when comes to dotted line and z-index in the examples below?

[quack-project.net...]

Is there any method to fix this or have I coded the css incorrectly?

first example,

<div style="
border-left: 2px solid #000;
border-right: 2px solid #000;
border-top: 2px solid #000;
border-bottom: 2px dotted red;
width:100px;
height:100px;
background-color:#fff;

z-index:100;
position:relative;
">

</div>

<div style="
border: 2px solid #000;
width:200px;
height:100px;
background-color:#ccc;

z-index:99;
position:absolute;
margin-top:-2px;
">
</div>

second example,

<style>
#menu {
overflow:visible;
}

#menu li {
float:left;
border: 0px dotted blue;
position:relative;
}

#menu a {
display: block;
}

/*level 1*/

#menu > ul > li {
float:left;
}

#menu > ul > li > a {
padding:10px;
background-color:#ffffff;
border-left: 2px solid #000;
border-right: 2px solid #000;
border-top: 2px solid #000;
border-bottom: 2px dotted red;
position:relative;
}

/*level 2*/

#menu > ul > li > ul {
position: absolute;
margin-top:-2px;
z-index:99;
border: 2px solid green;
display:block;
}

#menu > ul > li > ul > li {
float:none;
}

#menu > ul > li > ul > li > a {
padding:10px;
width:200px;
border-bottom: 2px dotted green;
}

</style>

<div id="menu">

<ul>
<li><a href="#" style="z-index:100;">Menu 1</a>
<ul>
<li><a href="#">Sub Menu 1.1</a></li>
<li><a href="#">Sub Menu 1.2</a></li>
<li><a href="#">Sub Menu 1.3</a></li>
</ul>
</li>

<li><a href="#" style="z-index:1;">Menu 2</a></li>

<li><a href="#" style="z-index:1;">Menu 3</a></li>

</ul>


</div>

many thanks,
Lau

[Super_B]

Wow, this really is strange. I can't fix it in IE7, but I CAN replicate it in everything else :P

#menu > ul > li {
float:left;
position: relative;
z-index: 1;
}

In this example, it would work just as well to get the inactive tab effect by doing something like this:

#menu > ul > li > a {
 ...
 border-bottom: none;
 ...
 }
#menu > ul > li > a.active {
 ...
 border-bottom: 2px dotted red;
 ...
 }
#menu > ul > li > ul {
 ...
 margin-top: 0;
 ...
 }

[alias]

Use a proper doctype.

[lauthiamkok]

thanks Super_B!

it does the trick perfectly! thanks so much! :-))