SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floating list, tooltip and z-index issue

    Here is my nemesis.

    Itīs a list with floating liīs, a link in each one, which is bleeding the li.

    In FF etc, the link is positioned correctly above the next li, in IE6-7, the link is stacked behind the next li.

    I guess this is a z-index-problem, right?

    HTML Code:
    <body>
    
    <ul>
    	<li><a href="#">Link</a></li>
    	<li><a href="#">Link</a></li>
    	<li><a href="#">Link</a></li>
    	<li><a href="#">Link</a></li>
    	<li><a href="#">Link</a></li>
    </ul>
    
    </body>
    HTML Code:
    ul {list-style:none;}
    
    li {
    	position:relative;
    	width:100px;
    	height:100px;
    	float:left;
    	background-color:#DDDDDD;
    	border:1px solid #AAAAAA;
    	margin-left:10px;
    }
    
    li a { 
    	position:absolute;
    	display:block;
    	top:30px;
    	left:40px;
    	height:80px;
    	width:80px;
    	border:1px solid green;
    	background-color:#CCCCCC;
    	z-index:1;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Yes it's a bug in IE7 and under where the position:relative infers z-index:0 on the parent instead of z-index:auto.

    This means that all parents are z-index:0 and therefore it doesn't matter what z-index the children are as they will always be within a parent with a z-index of zero.

    So in effect all parent list elements are z-index:0 and therefore according to usual browser rules the ones later in the html will sit on top of elements earlier in the html where they have the same z-index which is exactly what happens in IE.

    There are two solutions.

    You could add a class to each list element and apply a descending z-index in order so that each list subsequent lists gets a lower z-index than its predecessor which will allow the previous element to be on top.

    Or you could remove the position:relative from the parent so that there is no stacking context but then only move the absolute element using margins.

    e.g.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    ul {
        list-style:none;
    }
    li {
        width:100px;
        height:100px;
        float:left;
        background-color:#DDDDDD;
        border:1px solid #AAAAAA;
        margin-left:10px;
    }
    li a {
        position:absolute;
        display:block;
        margin-top:30px;
        margin-left:40px;
        height:80px;
        width:80px;
        border:1px solid green;
        background-color:#CCCCCC;
        z-index:1;
    }
    </style>
    <title>Untitled Document</title>
    </head>
    <body>
    <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
    </body>
    </html>
    Bear in mind that in IE text-alignment other than text-align:left on the parent will affect the position of the absolute element.

    Hope that helps

  3. #3
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seems to work. I&#180;ll check it out later in my actual context. Thanks so far.


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
  •