z-index opera problem

Discussion in 'CSS' started by atlantis11, May 26, 2006.

  1. #1
    I have 3 divs. 2 of them are pictures, one on the left, other on the right. 3rd div is a text, wich i want to place UNDER left picture and OVER right picture!

    div "left" is relative (z-index: 3;)
    div "right" is relative (z-index: 1;)
    div "text" is absolute (z-index: 2;)

    This z-index positioning works just fine in IE and FF, but not in opera, which puts the text div over both pictures.
    What am I supposed to do!

    Help appriciated!
     
    atlantis11, May 26, 2006 IP
  2. Greg-J

    Greg-J I humbly return to you.

    Messages:
    1,844
    Likes Received:
    153
    Best Answers:
    0
    Trophy Points:
    135
    #2
    My guess is that it has everything to do with the position:absolute. I've had some issues with Opera incorrectly indexing elements that weren't consistantly as well.

    Post the code, or a url and I'll have a look at it. Until then, you might try ratcheting the indexes further apart.
     
    Greg-J, May 29, 2006 IP
  3. draculus

    draculus Peon

    Messages:
    63
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    The elements have to be block elements to recieve a z-index attribute. You might try assigning display:block to all three elements to make sure.

    Also any contents of the relative divs should also be marked as relative.

    Ensure you are using a fully qualified DOCTYPE otherwise the behaviour in Opera is undefined. Opera (unlike the other two) does not have a quirks mode.
     
    draculus, May 29, 2006 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    Not true. Any elements with positional reference is subject to z-index, but you must understand how the stacking order model works. Consider this:
    
    span {
        position: relative;
        }
    
    .first {
        z-index: 1;
        color: white;
        background-color: red;
        }
    
    .second {
        z-index: 1;
        color: white;
        background-color: blue;
        left: -3em;
        }
    ===========
    <p><span class="first">first span</span> <span class="second span">second span</span></p>
    Code (markup):
    The second span, an inline element, will overlap the first. Now raise the z-index of the first.

    Not true. Where did you get that idea?

    Not true. See Opera 7 and 8 Doctype Switches

    I understand you're trying to help, but at least try to get the facts correct.

    cheers,

    gary
     
    kk5st, May 29, 2006 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    @ atlantis11: Give us some code or a link, so that we have something to work with.

    cheers,

    gary
     
    kk5st, May 29, 2006 IP
  6. atlantis11

    atlantis11 Guest

    Messages:
    8
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    ok, i have made just a simple example:

    html:
    <div id="float-wrapper">
    <div id="left">
    <div class="leftContent">&nbsp;</div>
    </div>
    <div id="right">
    <div id="rightContent">
    <h1>center</h1>
    </div>
    </div>
    </div>

    css:
    #float-wrapper {
    float: left;
    width: 300px;
    padding: 0px;
    margin: 0px;
    }

    #left {
    float: left;
    width: 100px;
    height: 200px;
    padding: 0px;
    margin: 0px;
    }

    .leftContent {
    width: 100px;
    height: 200px;
    text-align: left;
    background: url(red.gif) no-repeat left top;
    float: left;
    position: relative;
    z-index: 3;
    padding: 0px;
    margin: 0px;
    }

    #right {
    float: right;
    width: 200px;
    height: 200px;
    padding: 0px;
    margin: 0px;
    }

    #rightContent {
    width: 200px;
    height: 200px;
    background: url(blue.gif) no-repeat left top;
    padding: 0px;
    margin: 0px;
    float: left;
    position: relative;
    z-index: 1;
    }

    #rightContent h1 {
    color: #ffffff;
    font-size: 40px;
    padding: 0px;
    margin: 0px;
    float: left;
    padding: 0px;
    margin: 30px 0px 0px -40px;
    position: absolute;
    z-index: 2;
    }

    I noticed this problem to appear if pictures are used as background so make two simple gifs (somehow i didnt managed to attach them).
    I would like that text appears under left picture and over right one!
     
    atlantis11, Jun 1, 2006 IP
  7. Greg-J

    Greg-J I humbly return to you.

    Messages:
    1,844
    Likes Received:
    153
    Best Answers:
    0
    Trophy Points:
    135
    #7
    I'm sure Gary can chime in on this one much better than I, but I can't imagine you're going about achieving the desired result the most efficient way. Can you post a screenshot of what you're trying to achieve?
     
    Greg-J, Jun 1, 2006 IP
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #8
    Damn you Greg-J. It's hard to pass a dare. :)

    First was to simplify, make a minimal test case to find the actual culprit. Assume standards mode.
    
    <body>
      <div id="wrapper">
        <div id="left">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed euismod semper urna. Duis id elit sit
          amet tellus rutrum aliquet. Phasellus sollicitudin laoreet augue. Sed.</p>
        </div>
    
        <div id="right">
            <h1>center</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed euismod semper urna. Duis id elit sit
             amet tellus rutrum aliquet. Phasellus sollicitudin laoreet augue. Sed.</p>
        </div>
      </div>
    </body>
    Code (markup):
    The works-as-desired css was
    
    #wrapper {
        position: relative;
        background-color: #ffe;
        width: 325px;
        height: 400px;
        padding: 5px;
        }
    
    #left {
        z-index: 3;
        position: absolute;
        top: 5px;
        left: 5px;
        width: 150px;
        padding: 5px;
        background-color: #fee;
        }
      
    #right {
        z-index: 2;
        background-color: #eef;
        position: absolute;
        top: 5px;
        right: 5px;
        width: 150px;
        padding: 5px;
        }
      
    h1 {
        color: black;
        background-color: #efe;
        top: 0;
        left: -40px;
        position: absolute;
        }
    Code (markup):
    And, the doesn't work css
    
    #left {
        z-index: 3;
        position: relative;
        float: left;
        width: 150px;
        padding: 5px;
        background-color: #fee;
        }
    Code (markup):
    So the issue is z-index on a float, even a relative positioned float. A search of the Opera forums and its bug tracking site did not turn up anything, probably due to nothing recent being there. A Google search, and Google is, indeed, your friend, returned floats: layering with Opera-fix. You can find Georg over on the css-discuss mail list.

    So, anyway, it is a bug in Opera that is apparently fixed in v.9., and Georg has a work-around for right now.

    cheers,

    gary
     
    kk5st, Jun 1, 2006 IP
  9. Greg-J

    Greg-J I humbly return to you.

    Messages:
    1,844
    Likes Received:
    153
    Best Answers:
    0
    Trophy Points:
    135
    #9
    I knew you'd figure it out ;)
     
    Greg-J, Jun 1, 2006 IP
  10. atlantis11

    atlantis11 Guest

    Messages:
    8
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I downloaded Opera 9 Beta and noticed that this bug really is fixed.

    Thanks for the effort guys.
     
    atlantis11, Jun 2, 2006 IP