|
|
Posted by Vladdy on 10/12/05 07:54
eslachance@gmail.com wrote:
> 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')"><<</a></div><div style="float:right;"><a
> href="javascript:showCalendar('11','2005', 'test')">>></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.
>
Since your div with id="calendar" does have explicit width, setting a
child element to float left actually floats it as far left as possible.
Adding width: [N]px; to your inline style will solve the problem.
--
Vladdy
http://www.klproductions.com
[Back to original message]
|