Position Absolute div inside position relative list item - Clipping issue - ie7

Question

I have a strange problem in IE7.

I have position absolute div insde each list item. But the absolute div is hiding inside the div in IE7. The last div seems OK.

SCREENSHOT

JSFIDDLE: http://jsfiddle.net/surjithctly/dEBuC/

HTML

<div class="listitem">  Some long content here bl a bla blaaaaaaa baaaaaaaaaaa  <div class="layer">I'm a layer</div>              </div>
<div class="listitem">  Some long content here bl a bla blaaaaaaa baaaaaaaaaaa  <div class="layer">I'm a layer</div>              </div>
<div class="listitem">  Some long content here bl a bla blaaaaaaa baaaaaaaaaaa  <div class="layer">I'm a layer</div>              </div>
<div class="listitem">  Some long content here bl a bla blaaaaaaa baaaaaaaaaaa  <div class="layer">I'm a layer</div>              </div>
<div class="listitem">  Some long content here bl a bla blaaaaaaa baaaaaaaaaaa  <div class="layer">I'm a layer</div>              </div>
<div class="listitem">  Some long content here bl a bla blaaaaaaa baaaaaaaaaaa  <div class="layer">I'm a layer</div>              </div>
<div class="listitem">  Some long content here bl a bla blaaaaaaa baaaaaaaaaaa  <div class="layer">I'm a layer</div>              </div>

CSS

.container {
    width:900px;
    margin:0 auto;
}

.listitem {
    position:relative;
    background:#00CC00;
    border-bottom:1px solid #FFF;
    min-height:30px;
}

.layer {
    position:absolute;
    top:10px;
    right:10px;
    padding:10px;
    background:#993300;
    border:solid 1px #FFF;
    z-index:100;
    overflow:visible;
}

Any Idea how to to fix this issue in IE7?

Thanks in advance.

Answer 1

Add a wrapper element

Updated Demo

If editing the HTML source code is an option, add a wrapper element around the side content, and place it before the main text content. Then add position:relative to the wrapper element rather than adding it to .listitem. This moves the local stacking context (created at an inconvenient time in IE7) to an element where it does no harm.

HTML

<div class="container">
    <div class="listitem">
        <div class="wrapper">
            <div class="layer">I'm a layer</div>
        </div>
        Some long content here bla bla blaaaaaaa baaaaaaaaaaa
    </div>
    ....
</div>

CSS

.listitem {
    /* position: relative; */   /* Removed here */
    ....
}
.wrapper {
    position: relative;    /* Added here */
    height: 0;
}

jQuery

If editing the HTML source code isn't an option, there are a few options available using jQuery.

1. Take the basic approach presented by @avrahamcool (setting the z-index of each .listitem to a decreasingly small value). The downside to this approach is that it reverses the layering order of the side elements relative to one another, which may or may not be acceptable.

2. Use jQuery to edit the HTML DOM so that the HTML is as shown above, using the related CSS changes as well. The downside to this approach is that the styling of the content won't render correctly until after the jQuery code has run. So the content may briefly appear broken when the page first loads.

3. Set .container to position:relative, rather than .listitem. Use jQuery to calculate the relative position of each of .listitem element within .container, and set the top position of each side element based on this. This approach has the same downside as solution #2.

4. In an extreme case, if even editing the JavaScript isn't an option, you could simulate solution #1 by adding a series of increasingly long CSS selectors with decreasing z-index values (as shown below). I don't recommend this approach, as it's wildly impractical, but it could be used as a last resort.

CSS

.listitem {z-index:99;}
.listitem + .listitem {z-index:98;}
.listitem + .listitem + .listitem {z-index:97;}
...

Conclusion

In short, the current HTML doesn't support this type of layout in IE7. The only elegant solution is to change the HTML source code to something that does support it. Any jQuery solution will tend to be awkward in one way or another.

Answer 2

You can try to add overflow into class .listitem :

overflow:visible;

But, if you want your div to be exactly aligned to the item, make sure the list height and the div height are equals (including the padding).

For exemple, if your item height is 40px, your div height, with a padding set to 10px, must be 20px. And remove the top:10px;

.layer {
    position:absolute;
    top:-1px;
    right:10px;
    padding:5px;
    background:#993300;
    border:solid 1px #FFF;
    z-index:100;
    overflow:visible;
    height:20px;
}

In this exemple, i set the padding to 5px to keep the text center vertically. The height is set to 20px (2x padding + height = item height). And the top is set to -1px to deal with the 1px border.

http://jsfiddle.net/KtMbA/

Hope it'll help !

Answer 3

Here is a working solution: (tested on: IE10, FF, Chrome, IE10 using IE7/IE8/IE9 mode)

http://jsfiddle.net/avrahamcool/dEBuC/4/

the solution is to give different z-index to the listitem elements, using a script.