SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Nov 2004
    Location
    vodo
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE bug? divs with z-index are overlapped by others

    Hi there,

    I have again a big problem with IE. I have some sort of container which has a bottomline. In this bottomline a div "popup" should be opened. -> This should be always in the front. If a relatively positioned element follows it overlaps the popup (IE only).

    Is this a known bug? Is there any other way (for IE) to position elements at the bottom of a container without setting the container position: relative?

    Here comes the code:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>IE test</title>
    <style type="text/css">
    <!--
    .popup {
    	position: absolute; 
    	background-color: red; 
    	width: 200px; 
    	height: 200px; 
    	z-index: 100; 
    }
    
    .bottom {
    	background-color: #000;
    	position: absolute;
    	bottom: 0;
    	width: 100%;
    }
    
    .container {
    	height: 200px;
    	position: relative;
    	background-color: #999;
    }
    
    .container2 {
    	position: relative;
    	background-color: blue;
    }
    -->
    </style>
    </head>
    <body>
    <div class="container">
      <div class="bottom"><a href="#">link</a>
        <div class="popup">gfs</div>
      </div>
    </div>
    <div class="container2">
      <p>some textgfdsgfsgfs gfdsgfsgfs gfdsgfdsfds</p>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Member
    Join Date
    Nov 2004
    Location
    vodo
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no ideas at all?

  3. #3
    SitePoint Member
    Join Date
    Nov 2004
    Location
    vodo
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your suggestion. I need the bottom container to be in the surrounding container. So I thought about moving it in with a negative top-margin. It works, but I doesn't fit into the design anymore. Are there any other ideas?

    I found out that even IE7 has this incredible bug.
    The container or 0 point of a position absolute needs to be relative, also position absolutes usually need a left top width and height
    My absolute positioned container has this. It gets the information by javascript.

  4. #4
    SitePoint Member
    Join Date
    Nov 2004
    Location
    vodo
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am sorry. This is exactly the problem I have. container2 will be also position: relative; I can't remove this. (it also holds a bottom container with the popup in our application)

  5. #5
    SitePoint Member
    Join Date
    Nov 2004
    Location
    vodo
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know, but just with IE - Thats my problem

  6. #6
    SitePoint Member
    Join Date
    Nov 2004
    Location
    vodo
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No it is still not working:

    The red popup should be in front of the blue container2. First I need to reduce the z-index to get it working with Opera and Fireworks. But IE is still displaying the blue container in front of the red popup.

    I am sorry I appreciate your help.

  7. #7
    SitePoint Member
    Join Date
    Nov 2004
    Location
    vodo
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am sorry for wasting your time - but I know this problem. Thats why I was asking if there is a workarround (without removing the position: relative). Or at least if this behaviour of the IE - I would call it a bug - is a know problem.

    Sorry man ...


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
  •