SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    border shows through in IE 6

    On this page, if you hover over option 1 why does the bottom border of option 2 show through in IE 6?

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Chris,
    The issue is not that it is showing the bottom border. What you are seeing is the li item on top of the popup div. If you will set a background color on the li you can then see what is going on. This is a IE6 & 7 z-index bug, when there is an absolute positioned child within a relative positioned parent it can never layer on top of the next RP element below it.

    I'm not sure if I explained that properly, but it is due to the way IE improperly defines a stacking context with the default z-index:auto.

    It is all explained right here.
    http://aplus.rs/lab/z-pos/index2.php
    http://annevankesteren.nl/2005/06/z-index

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    As you are most likely aware of, html elements that are lower in the source order have a higher stacking context when no z-index value is set. That is, they are relying on the default z-index:auto;

    As mentioned in my last post, that is where the problem begins with IE since it wrongly establishes the default as zero rather than auto. The best way to combat this is to not get caught up in it to begin with. But if there is no way around it and your layout requires overlaps on the popup then it's classes to the rescue.

    By setting classes on each list item you can give each one it's own z-index value with the last one in the source having the lowest z-value.

    I have a JS Dropdown Message Demo that is set up with classes just like I explained.

    Here is how you would do it with your code -
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <title>display div on link hover</title>
            <style type="text/css">
                body, ul, li, div{
                    margin: 0;
                    padding: 0;
                }
                ul{
                    /* element not cleared in standards based browsers */
                    border: 1px solid #000;
                    border-width: 1px 1px 0;
                    width: 300px;
                    float:left; /*contain inner floats*/
                }
                li{
                    border-bottom: 1px solid #000;
                    float: left;
                    list-style: none;
                    position: relative;
                    width: 300px;
                }
                div{
                    background: #fff;
                    border: 1px solid #000;
                    display: none;
                    position: absolute; left: 190px; top: 90%;
                    width: 200px;
                    z-index: 10;
                }
                a{
                    float: left;
                    text-align: center;
                    width: 300px;
                }
                .one{z-index:4; background: cyan;} /*make it visible with BG colors*/
                .two{z-index:3; background:palegreen;}
                .three{z-index:2; background:yellow;}
                .four{z-index:1; background:skyblue;}
            </style>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        </head>
        <body>
            <ul id="list">
                <li class="one"><a href="#">option 1</a>
                    <div>
                        This is where the additional information be when hovering the previousSibling a element.
                    </div>
                </li>
                <li class="two"><a href="#">option 2</a>
                    <div>
                        Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
                    </div>
                </li>
                <li class="three"><a href="#">option 2</a>
                    <div>
                        Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
                    </div>
                </li>
                <li class="four"><a href="#">option 2</a>
                    <div>
                        Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
                    </div>
                </li>
            </ul>
            <script src="delete1.js" type="text/javascript"></script>
        </body>
    </html>

  4. #4
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ray. I appreciate your explanations. If I understand..

    original markup and css:
    Code HTML4Strict:
    li{
    				border-bottom: 1px solid #000;
    				float: left;
    				list-style: none;
    				position: relative;
    				width: 300px;
    			}
    			div{
    				background: #fff;
    				border: 1px solid #000;
    				display: none;
    				position: absolute; left: 190px; top: 90%;
    				width: 200px;
    				z-index: 2;
    			}
     
    			<li class="one"><a href="#">option 1</a>
    				<div>
    					This is where the additional information be when hovering the previousSibling a element.
    				</div>
    			</li>

    IE 6 and 7 apply z-index: 0; to positioned elements. In IE I think that means that children elements of positioned elements cannot overlap elements outside the parent. So I can see now why the div did not cover the next li in IE.

    Of course your solution works, but there's one thing I don't understand.. By NOT relying on IE's default z-index of 0 on position elements and giving the element a different z-index via a class, shouldn't the same rules apply? That child elements will not overlap elements outside the parent?

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    By NOT relying on IE's default z-index of 0 on position elements and giving the element a different z-index via a class, shouldn't the same rules apply? That child elements will not overlap elements outside the parent?
    I think you missed the part about elements lower in the source order having a higher z-index when they are in default mode.

    In my code I have it reversed. The last list item is the lowest z-index.

    If there were 10 list items the very first one would have to be z-index:10 and the very last one would need to be z-index:1; Then your pop up div would have to be at least z-index:11;

    shouldn't the same rules apply?
    No, they only apply when IE is left to determine the stacking context on it's own. When we tell it the stacking order we want then it will behave. The shame of it is that IE7 has this problem and situations like this will require workarounds even after support for IE6 is dropped.


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
  •