Posted by eslachance on 10/12/05 04:39

Hey there,

I have a small problem with some weird behavior of Firefox. I haven't
the courage to see if it's firefox not following specs or IE doing what
it does most (not following standards), but in any case, this is the
only thing preventing my code from not working.

So here are the details. I have a div that's positioned absolutely on
my page. This div contains a small calendar that I update using a
little AJAX trick, and navigation arrows left and right to call up that
ajax javascript. The two arrows are positioned using floats left and
right, and under it is a table that shows the actual calendar.

now the kicker is that on IE, the div is the proper width, the arrows
look great, everything is a-ok. But in Firefox, the arrow that's
floating on the right, instead of floating on the right of the absolute
DIV, decides to float on the right of the PAGE. So the ~200 px wide div
gets streched all the way to the right side of the page.

I've tried using a "span style='clear: both'" after the float div's, as
I've see this seems to be the most common solution, but nothing helps.

Here's the page URL:
http://b2blog.sh.nu:81/users/test/index.html

The HTML:

<div id="calendar" style="position: absolute; top: 75px; left: 400px;
border: 2px solid #000; display:none;" onmouseout="if
(!this.contains(event.toElement)) this.style.display = 'none';">
<table class='calendar'><caption><div style="float:left;"><a
href="javascript:showCalendar('9','2005',
'test')">&lt;&lt;</a></div><div style="float:right;"><a
href="javascript:showCalendar('11','2005', 'test')">&gt;&gt;</a></div>
October, 2005</caption>

And the CSS that goes with it (you can view
http://b2blog.sh.nu:81/styles/common.css for the calendar CSS, and
http://b2blog.sh.nu:81/styles/default/style.css for the rest of the
page's layout):

caption
{
font-family:arial,helvetica;
font-size:11px;
color: black;
font-weight: bold;
background-color:#FFFFFF;
text-align: center;
}

..calendar
{
font-family:arial,helvetica;
font-size:11px;
color: white;
background-color: #c0c0c0;
border: #1px solid #000;
}


I invite you to view the page in IE and FireFox to see the
difference...

Thanks in advance for anyone who can shed light on this for me. I've
done my reasearch, google didn't seem to help me this time, which is
very rare :(

Eric-S Lachance.

• Next in forum: Re: Float:right in position: absolute messed up in firefox
• Prev in forum: Re: Regex help
• Thread view: Float:right in position: absolute messed up in firefox

[Reply to this message]