#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    9
    Rep 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}
  2. #2
  3. nx
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    USA
    Posts
    626
    Rep Power
    0
    it works fine for me...NS 6...and hmm...
    maybe you should try giving the actual bars a z-index of like -10 or something below zero..

    [[[terminal]]]
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    9
    Rep Power
    0
    I have tried various combinations of -ive and +ive indicies, doen't seem to make a lot of difference.

    It's possiblyy looking like an IE quirk as NS6 and Firefox seem to work as I'd expect.
  6. #4
  7. I'm just an IF statement
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    400
    Rep Power
    11
    I have IE6 and it works just fine for me.
    "In a way, we're dead already"
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    9
    Rep Power
    0
    Should do now - I found a fix that involved moving some backgrounds.

IMN logo majestic logo threadwatch logo seochat tools logo