SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE z-index problem

    Somehow the z-index on hovered link wont work in IE.

    When I hover over the top part of the first link it reveals its bottom part cos of high z-index on hover, but not in IE.
    how to fix this?

    heres the code:

    Code:
    ul { 
       margin: 0; 
       padding: 0; 
       width: 320px; 
       height: 319px; 
       overflow: hidden; 
       font-size: 1em; 
       line-height: 11em;
    }
    
    ul li { 
       margin: 0; 
       padding: 0; 
       list-style-type:none; 
       position: absolute; 
    }
    
    ul li#first { 
       width: 320px; 
       height: 160px; 
       left: 0; 
       top: 0; 
    } 
     
    ul li#second { 
       width: 160px; 
       height: 229px; 
       left: 0; 
       top: 90px; 
    } 
    
    ul li#third { 
       width: 160px; 
       height: 229px; 
       left: 160px; 
       top: 90px; 
    } 
    
    ul a { 
       display: block; 
       text-decoration: none; 
       background: transparent; 
       position: absolute; 
       overflow: hidden; 
       text-align: center; 
    }
    
    
    ul li#first a { 
       width: 320px; 
       height: 160px; 
    } 
     
    ul li#second a { 
       width: 160px; 
       height: 229px; 
    } 
    
    ul li#third a { 
       width: 160px; 
       height: 229px; 
    } 
    
    
    ul li a { 
       background: url(images/anyimage.gif) no-repeat 0 0;  
    }
    
    ul li#first a:hover { 
       z-index: 10; 
    } 
    
    ul li#second a:hover { 
       z-index: 4; 
    }
    
    ul li#third a:hover { 
       z-index: 5; 
    }
    Code:
    <ul>
      <li id="first"><a href="#link">First</a></li>
      <li id="second"><a href="#link">Second</a></li>
      <li id="third"><a href="#link">Third</a></li>
    </ul>

  2. #2
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In order for z-index to "work" the element in question must be positioned, either relatively or absolutely.

    Add "position: relative;" to your rules with z-index's.

  3. #3
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do have the links positioned (absolutely). I even added it again in the hover rule:

    Code:
    ul li#third a:hover { 
       z-index: 5; 
       position: absolute; 
    }
    but it still doesnt work

  4. #4
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanx it works

    thanx for the tidyup too


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •