Having trouble with absolute positioning / Z-Index with Lists and Tables in IE 6 and 7

css list html-table css-position z-index

21,276

Solution 1

Using position: relative sets up a new z-index stacking context inside the relatively positioned element in IE.

Elements inside the relatively positioned element will be stacked according to their z-index, but when interacting with elements outside of the parent element, the z-index of the parent is used. This is why the popup shows below the multi-day event element (because even though there's no explicit z-index on the element, elements that come "later" in the document implicitly have a higher z-index than ones that come before)

To fix it, you can either

Not use position-relative on the cell and position the popup relative to the entire document
Give the container <div> a higher z-index than the one later on in the document.

I've found that changing the z-index programmatically with JavaScript to be best, since it minimizes weird interactions with the rest of the page (i.e. set the z-index higher when it is opened, and reset it back to default when it is closed)

Some blog posts that talk about this problem:

Solution 2

If you are making this table with some programming language such as PHP, .NET, etc.

You can make something like this:

Count the total rows of your table, then start Z-Index with the this total, then decrease the counter until the last row. Doing this, your first row will have the greatest z-index and the last row te lower.

<table> position relative
<tr> nothing
<td> nothing
<div> position relative
<element position absolute>
</div>
</td></tr></table>

----
Table Loop:

$nZ = count($resource);
foreach($resource as $line) {
 <tr><td>
   <div style="z-index: $nZ">content</div>
 </td></tr>
 $nZ--;  // Decrement nZ
}
----

C ya!

Solution 3

You might want to try setting the z-index of the containing element. So, your popup would have a z-index of 1 (or 2) and your container would have a z-index of 0 (or 1).

21,276

Author by

Admin

Updated on September 30, 2020

Comments

Admin over 3 years

I'm creating a prototype of a CSS/XHTML tables-based calendar that eventually will be generated with PHP for the Simple Updates content management system. I've run into a problem with using absolute positioning to create a popup that would show all the events in a day when there are more than will fit in a cell. The problem can be seen here:

http://sutest.bravehost.com/

As you can see, the popup pops under the multi-day event and date in both IE7 and IE6. Putting a z-index on the popup fixed the problem in Firefox. I've tried putting all sorts of z-index values on the popup, changing the display property of the popup and related element, as well as many other varied approaches, with no success.

The HTML is as follows:

<td valign="top"><div>
    <div class="date">25</div>
    <ul>
        <li class="single"><a href="#">History</a></li>
        <li class="single"><a href="#">Biology</a></li>
        <li class="single"><a href="#">Computers</a></li>
        <li class="single"><a href="#">POTCH</a></li>
        <li class="single"><a href="#">Precal</a></li>
        <li class="more"><a href="#">+3 More</a></li>
    </ul>
    <div class="popup">
        <span class="close"><a href="#">X</a></span>
        <ul>
            <li class="single"><a href="#">History</a></li>
            <li class="single"><a href="#">Biology</a></li>
            <li class="single"><a href="#">Computers</a></li>
            <li class="single"><a href="#">POTCH</a></li>
            <li class="single"><a href="#">Precal</a></li>
            <li class="single"><a href="#">Science PC</a></li>
            <li class="single"><a href="#">Physics</a></li>
            <li class="single"><a href="#">Construction</a></li>
        </ul>
    </div>
</div></td>

This is the cell from the table with the hard-coded popup. The first list contains the normal, visible events. The div containing the second div is the popup. It should be displaying over the multi-day event:

<td valign="top" class="blank"><div>
    <div class="date">2</div>
    <ul>
        <li style="background-color:plum;">&nbsp;<img src="endr.png" alt="." /></li>
    </ul>
</div></td>

I'm using list items to "fake" the multi-day event. The li in this day is styled to be the section of the bar seen to render over the popup in IE 6 and 7.

The CSS relating to the popup:

.popup {
position:absolute;
top:-1px;
background-color:white;
border:1px solid black;
overflow:visible;
padding:10px;
width:auto;
z-index:1;
margin-left:-1px;
}

And to the multi-day event:

li {
margin:2px 0;
padding:0 0 2px 5px;
white-space:nowrap;
}

I've tried to fix this problem by searching Google repeatedly and trying other Q&A sites.

Any help would be greatly appreciated!

Admin almost 15 years

I'm not sure what you mean... I tried setting the z-index of the multi-day event to 0 (and several negative values), but to no avail, I assume due to the fact that the event is not absolutely positioned.
SeanJA almost 15 years

I would also suggest using z-indexes that give you a chance to change your mind later and add another element in between the two layers so something like: 0, 10, 20...
Admin almost 15 years

Ok. I had forgotten that z-index worked on more than just absolutely positioned elements. I just tried adding position:relative; and z-index:0; to the li selector rule set. Sadly, this did not fix the problem.
Admin almost 15 years

Yes, I have tried positioning the offending elements and giving them a lower z-index than the popup. Doesn't seem to be working. =P