April 17th, 2004, 02:18 AM
|
|
Registered User
|
|
Join Date: Sep 2003
Posts: 9
Time spent in forums: < 1 sec
Reputation Power: 0
|
|
|
CSS Menu Z-Index problem
I'm experimenting with some pure CSS menus and I'm trying to use an icon with them.
see http://www.fogcat.co.uk/css/test.html
css is http://www.fogcat.co.uk/css/test3.css
But the icons are appearing behind other menu items - even though I have the z-index set to 100. What am I not doing?
It works fine in Firefox but not IE6.
The HTML is
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="./test3.css" TITLE="bw">
</head>
<body>
<div id="container">
<p>just some text</p>
<div id="menudiv">
<ul>
<li><a href="#" title="Link1"><img src="item.gif" >Home <span class="line1"></span></a></li>
<li><a href="#" title="Link2"><img src="item2.gif">Menu Two <span class="line2"></span></a></li>
<li><a href="#" title="Link3"><img src="item.gif" >Menu Three<span class="line3"></span></a></li>
<li><a href="#" title="Link4"><img src="item2.gif">Menu Four <span class="line4"></span></a></li>
<li><a href="#" title="Link5"><img src="item.gif" >Menu Five <span class="line5"></span></a></li>
<li><a href="#" title="Link6"><img src="item2.gif">Menu Six <span class="line6"></span></a></li>
<li><a href="#" title="Link7"><img src="item.gif" >Menu Seven<span class="line7"></span></a></li>
<li><a href="#" title="Link8"><img src="item2.gif">Menu Eight<span class="line8"></span></a></li>
<li><a href="#" title="Link9"><img src="item.gif" >Menu Nine <span class="line9"></span></a></li>
</ul>
</div>
</div>
</body>
</html>
the CSS is
Code:
BODY
{
background-color: #F0F0F0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
}
#container
{
border: 1px solid green;
padding: 20px;
background-color: #FFFFFF;
top: 20px;
left: 20px;
}
#menudiv {
width: 240px;
}
#menudiv ul
{
margin: 0;
padding: 0; /*removes indent IE and Opera*/
list-style-type: none; /*removes indent Mozilla and NN7*/
font-family: Arial, Helvetica, sans-serif; /*turns off display of bullet*/
font-size: 14px;
}
#menudiv li
{
margin: 0px 0px 15px 0px;
background-color: White;
text-align: center;
}
div#menudiv li a
{
display: block;
position: relative;
text-decoration: none;
padding: 5px 0px 5px 0px;
width: 100%;
background-color: #DDDDDD;
color: Black;
}
#menudiv li a:hover
{
background-color: #6B6B6B;
color: White;
}
div#menudiv li a span
{
display:block;
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 3px solid silver;
/* position shouild be border width + gap + padding in <a>*/
top: 9px;
}
div#menudiv li a img
{
position: absolute;
left: 0;
top: 0;
padding: 0;
margin: 0;
border-width: 0;
width: 0;
height: 0;
z-index: 100;
}
div#menudiv li a:hover img
{
width: 60px;
height: 60px;
top: -10px;
left: -12px;
}
div#menudiv li a:hover span.line1 {border-bottom-color:red;}
div#menudiv li a:hover span.line2 {border-bottom-color:orange}
div#menudiv li a:hover span.line3 {border-bottom-color:yellow}
div#menudiv li a:hover span.line4 {border-bottom-color:green}
div#menudiv li a:hover span.line5 {border-bottom-color:blue}
div#menudiv li a:hover span.line6 {border-bottom-color:magenta}
div#menudiv li a:hover span.line7 {border-bottom-color:teal}
div#menudiv li a:hover span.line8 {border-bottom-color:darkgreen}
div#menudiv li a:hover span.line9 {border-bottom-color:cyan}
|
Dev Shed Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
