Topic: Absolutely positioned div in floating left div problem FireFox (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=29026" title="Pages that link to Topic: Absolutely positioned div in floating left div problem FireFox (Page 1 of 1)" rel="nofollow" >Topic: Absolutely positioned div in floating left div problem FireFox <span class="small">(Page 1 of 1)</span>\

 
Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 03-06-2007 19:22 Edit Quote

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;
}

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 03-06-2007 19:50 Edit Quote

This code is useless.

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 03-06-2007 20:02 Edit Quote

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.

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 03-06-2007 21:47 Edit Quote

[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]

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 03-06-2007 23:23 Edit Quote

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..

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

IP logged posted posted 03-07-2007 10:41 Edit Quote

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,



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu