Absolute Position over Relative Position in IE (absolute div has no content)

Hello everyone - I'm in the process of writing a "date range selector" and having a problem with IE. I'm using absolutely positioned DIV's to draw a line across another div to indicate a specified date.

I believe IE is drawing the relative div over the absolute div because it has no content inside of the absolute div, just a border.


Please have a look:


FF Screenshot:
http://www.screencast.com/users/aschaible/folders/Jing/media/9b34305e-f652-41d5-8d0a-103df31d3386

IE Screenshot:
http://www.screencast.com/users/aschaible/folders/Jing/media/419b5b1d-b83f-4e93-ae8f-2d5f77360ba2

Any ideas?

Thanks!

Look into the z-index property. IE has some issues, though. Depends on if and how the divs are nested and on what level they are (i.e. siblings or parent/child relationship).

Yeah I've adjusted Z-Index and it has no effect on the display.

Here's the code:


<div id="popupcontrols">
<div id="dates">
<div id="today" class="date">
Fri Feb 15 2008
<div class="monthlineright"/>
</div>
<div class="date"/>
<div id="onemonthback" class="date">
Wed Jan 16 2008
<div class="monthlineright"/>
</div>
<div class="date"/>
<div id="twomonthsback" class="date">
Mon Dec 17 2007
<div class="monthlineright"/>
</div>
<div id="begindate" class="date">
<div class="monthlineleft"/>
Sat Nov 17 2007
</div>
</div>
<div id="DateChooser">
<div id="ext-gen7" class="x-slide-zone-horizontal" style="position: relative; width: 901px;">
</div>
</div>


If I adjust the background to a static position rather than relative, the lines do show over the background - the problem is my draggable control needs to have the background position set to relative.

Thanks for the help!