Topic: Absolutely positioned div in floating left div problem FireFox (Page 1 of 1)

I have a div, I call it PlaceHolder. This element is floating left. Within each of these I have a single div who's posiition is absolute. In IE, no problem. In Firefox, the placeholder divs overlap, or maybe it is the internal absolute div element not obeying and being displayed outside of it's container div "placeholder".

My assumption is:
Absolutely positioned element will be contained within the parent element as long as you have not set either the top, left, right, or bottom positions, and these rules are exclusively mutual (if I said that right).

Am I right? If so, what is wrong with my code?

Karl..

CODE:
<div id="#RESULTS_NAVIGATOR">

<div class="placeholder">
<div class="contentWrapper" id="session_picker">
<h1 onmouseout="Element.hide('session_picker_content')" onmouseover="Element.show('session_picker_content');" class="topic_title mso_red_fill">choose session</h1>
<ul onmouseout="Element.hide('session_picker_content')" onmouseover="Element.show('session_picker_content');" style="display: none;" class="content" id="session_picker_content">
<li><a onclick="Element.hide('session_picker_content'); return ajaxGetDivisions(10462,'1');" href="/results.aspx?tax=1&meet=10462&sess=1&">Session - 1</a></li>
<li><a onclick="Element.hide('session_picker_content'); return ajaxGetDivisions(10462,'2');" href="/results.aspx?tax=1&meet=10462&sess=2&">Session - 2</a></li>
<li><a onclick="Element.hide('session_picker_content'); return ajaxGetDivisions(10462,'3');" href="/results.aspx?tax=1&meet=10462&sess=3&">Session - 3</a></li>
<li><a onclick="Element.hide('session_picker_content'); return ajaxGetDivisions(10462,'4');" href="/results.aspx?tax=1&meet=10462&sess=4&">Session - 4</a></li>
<li><a onclick="Element.hide('session_picker_content'); return ajaxGetDivisions(10462,'LRG');" href="/results.aspx?tax=1&meet=10462&sess=LRG&">Session - LRG</a></li>
<li><a onclick="Element.hide('session_picker_content'); return ajaxGetDivisions(10462,'SML');" href="/results.aspx?tax=1&meet=10462&sess=SML&">Session - SML</a></li>
</ul>
</div>
</div>

</div>

#RESULTS_NAVIGATOR
{
height:25px;
}
#RESULTS_NAVIGATOR div.placeholder
{
float:left;
width:225px;
}

.contentWrapper
{
padding: 0px;
margin:0px;
}
.contentWrapper .content
{
overflow:hidden;
margin: 0px;
color:#000;
padding: 2px;
background:#fff;
border:solid 1px #D0CECE;
}
.contentWrapper h1.topic_title
{
height:16px;
background-image:url(/images/mso_corner.gif);
background-position:right top;
background-repeat:no-repeat;
color:#ffffff;
font-size:10pt;
font-weight:bold;
padding-left:1px;
margin:0px;
}

This code is useless.

Why is the code useless? Do you want it stripped down more? I couldn't possibly include all the code, the codebase is pretty large.

[quickie]

Because there might be inherited rules. Upload the page somewhere and post a link. I seriously hope the events are not really inline but from a live view of the source. It looks scary. Not to mention that what you do in the mouseover and mouseout events can be done using CSS only ( at least in any browser with a half decent support of CSS ).

[/quickie]

Here is the beta site,
http://msob.lfchosting.com/
and here is a good starting point
http://msob.lfchosting.com/results.aspx?tax=1&meet=10445

I have looked at css flyout scripts. I wasn't prepared to develop the cross-browser CSS rules for UL/LI hovering, and so have chose to stick with javascript methods, using prototype as a framework, which I am enjoying a lot.

Thanks,
Karl..

I have had a look at those links and I can't quite work out where your example starts, It does look like you may be able to get away with not using absolutely positioning though, what is the reason you chose to try this?

Also can you elaborate more on your problem, perhaps give a screenshot of a desireable outcome?

Cheers,