View Full Version : Nested Divs won't show up in IE because of position:absolute

Brett Bretterso
08-16-2005, 07:04 PM
I'm working on a complicated menu that uses javascript. The menu has a list of links. Some of the links go to other pages, but some open up a submenu. I made a script that would make the current menu fade out, the link clicked on slide to a better position and a new menu fade in under it. In Firefox it works great, but when I tried to show someone who uses IE I found out that for some reason it didn't like it. The main menu fades out just fine, and the link clicked on slides into position just fine, but the submenu won't fade in. I thought it might be a problem with display:none and display:block, but I tried taking it out completely. To my surprise it still wouldn't display it. I tried taking out everything in the submenu's div's style except for its position:absolute and top and left. It still wouldn't display it. Then I tried taking out the entire style and then it would. So I tried taking out just the position stuff and it displays it when it's supposed to, but obviously not where it's supposed to.

So, apparently I'm getting some kind of conflict between IE and position that only happens to nested divs.

Here's an example. The full stuff is huge.

<div id="cal" style="display:block; position:absolute; left:10px; top:390px; opacity: 1; filter:alpha(opacity=100); ">
<a href="javascript:ssStart('cal', ['links', 'surveys', 'lib', 'links2', 'links3', 'links4', 'forms'], ['cal2'], [10,390,15,110], 1)">On Call Schedules</a>
<div id="cal2" style="display:none; opacity: 1; filter:alpha(opacity=100); position:absolute; top:20px; left:5px">
<a href="calhelp.html">Calendar Help</a><br>
<a href="events/orientsched04_05.htm">Staff Orientation</a><br>
<a href="">Classroom Schedule</a><br>
<a href="../events/oncall.htm">Old On Call Schedule</a><br>
<a href="calendar/oncall/basiconcall.aspx">On Call Calendar</a><br>
<a href="calendar/oncall/setoncall2.aspx">Set On Call</a><br>

The bold part is my javascript function. The first parameter tells it the id of the div to slide. The second parameter is an array of the id's of divs to fade out (the rest of the main menu). The third parameter is an array of the id's of divs to fade in (the submenu). The fourth parameter is the beginning XY coordinates followed by the ending XY coordinates for the sliding div. The fifth parameter tells it how many seconds the whole process should take. The sliding just works with the absolute position of the div. The fading changes opacity. If it's fading in then it starts by making it display:block. If it's fading out then it ends by making it display:none. It's actually a fairly simple set up, and I don't think the function has anything to do with my problem.

The bold and italic part is the part that I took out that made it display it in IE. I have no idea why. I discovered that it did through trial and error.

Does anyone know why a nested div that has position:absolute would not show up in IE? And more importantly, does anyone know a way around this problem?

Thanks in advance

Brett Bretterson

Brett Bretterso
08-16-2005, 10:52 PM
:( Apparently either no one cared or no one had the answer. So, I figured it out myself. In case anyone is wondering, here it is:

IE doesn't like to have nested divs where both the inner and the outer div have position:absolute unless the outer div also has width and height. The inner div will still show up as long as the absolute coordinates tell it to be on top of something in the outer div that doesn't have position absolute.

In short: To fix this problem make sure you put width and height settings on your outer div that are big enough to contain the inner div in its absolute location.

-Brett Bretterson

08-16-2005, 11:13 PM
Apparently either no one cared or no one had the answer. So, I figured it out myself.

Everyone is here on their own time to help each other out, so it helps to cut to the chase when posing your question.

Four hours without a response doesn't mean no one cared, notice your post only had 10 views in that time frame. It's more likely the person with the right knowledge simply hadn't viewed your post.

Kudos for sorting it out yourself and sharing the solution. :thumbsup: