Hello!
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:
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;"> <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;
}
This is my first time on Stack Overflow, so please tell me if I'm not following proper procedure. I've tried to fix this problem for the better part of a day, searching Google repeatedly and trying other Q&A sites. One of my friends happened to mention Stack Overflow, and I must say, I like what I see.
Any help would be greatly appreciated!
-- Nathan