1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

z-index opera problem

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

0
  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