Float:right in position: absolute messed up in firefox

[eslachance]

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.

 

[eslachance]

*cough* Correction: "Keeping my code from working properly", rather
than keeping it from not working. That's something easy to do

 

[Mark Parnell]

The two arrows are positioned using floats left and
right, and under it is a table that shows the actual calendar.

No, the arrows are in the table (in the caption element), not above it.

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

Well, it would help if display: none; wasn't set on the calendar. Makes
it easier to check.

Anyway, set the same width on the table and caption as the div (200px
ATM).

FWIW, Opera displays it the same as IE.

You should validate your HTML and CSS (for the HTML you'll have to fix a
couple of invalid characters first) - that's always the first step in
trying to fix this sort of problem.

http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

The specs require a width on any floated elements, but the validator
doesn't seem to be complaining about it - that may be because you are
using inline styles though. The validator doesn't seem to check inline
styles. Adding a width to the arrow divs doesn't seem to fix the problem
though.

We'll get to the rest of the problems shortly.

 

[Vladdy]

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.

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.

 

[Gary Dale]

Can someone please explain what is going on here? I have some examples
of weird behaviour that I can't figure out.

I have valid XHTML 1.1 and CSS according to W3C validators.

I have an image at the top left of my page. If I specify a
border-bottom, the border starts a couple of pixels below the bottom of
the image. My workaround was to create a span and manually position it
at the bottom of the image. Why do I need to do this (yes, my
measurements are correct - the image is 94 pixels high and I have to
position the span at 94px down to get it in the right position)? I've
read some material that suggests that the <div> tag is like <p> and puts
extra space below it, but this even happens when I don't have a <div> tag.

I have a table that is just below the span. Again, I had to manually
position it. I've specified border: none; margin: 0px; padding: 0px; but
the table is still one pixel from the edge of the page. Moreover,
although it is the same width as the span above it, it looks like it
ends a pixel before the span as well.

The effect is the same with both FireFox and IE 6 on Linux and XP. I've
had the table problem on other pages too, but as my left column is
usually white, it didn't matter. On this site, the left and right
columns are different colours from the background, so the white
background shows the problem quite visibly.

Can someone explain where these extra pixels are coming from and how to
position a table to start at left: 0px;?

Here's the relevant HTML:
<!--
<body class="main">
<div>
<img src="images/banner.jpg" width="382" height="94" alt="MCC
logo" />
<span class="banner"><script
type="text/javascript">document.write(document.title);</script>
</span>
</div>
<table class="full">
<tr>
<td class="leftcolumn">
<div><a href="index.html">Home</a></div>
<div><a href="whoweare.html">Who we are</a></div>
<div><a href="mission.html">Our mission</a></div>
<div><a href="events.html">Events</a></div>
<div><a href="contact.html">Contact</a></div>
<div><a href="donate.html">Donations</a></div>
<div><a href="membership.html">Join</a></div>
<div><a href="articles.html">Articles</a></div>
<div><a href="links.html">Links</a></div>
</td>
<td class="mainarea">
...

-->

 

[Dylan Parry]

Using a pointed stick and pebbles, Gary Dale scraped:

Can someone please explain what is going on here?

Could you post a URL? It is very difficult to figure out what is going
wrong when you only posted the code, which without the images etc is not
complete.

 

[Gary Dale]

Using a pointed stick and pebbles, Gary Dale scraped:




Could you post a URL? It is very difficult to figure out what is going
wrong when you only posted the code, which without the images etc is not
complete.

Didn't have it running anywhere. Anyway, the problem seems generic.
Tables seem to have hidden, non-removable borders.

I've got some test code in www.muslimcanadiancongress.org/test.html
which shows the problem. To make it less visible, I started the span 2
pixels to the right of the left edge of the page. That makes it line up
with the leftmost column in the table.

To see the problem with the image, just write your own page and put a
border at the bottom of an image.

Another problem is getting the right column to space out properly. With
FireFox it looks perfect. With Konqueror they are too close and with IE
they are too far apart. I've read that IE treats height and width as
suggestions, but it apparently also feels that in doing its
calculations, it should ignore position tags too. To be fair, so does
FireFox, but at least it allowed me to build a div box around things to
position them properly. With Konqueror the problem is mainly the font
sizes it uses.

 

[eslachance]

Didn't have it running anywhere. Anyway, the problem seems generic.
Tables seem to have hidden, non-removable borders.

I've got some test code in www.muslimcanadiancongress.org/test.html
which shows the problem. To make it less visible, I started the span 2
pixels to the right of the left edge of the page. That makes it line up
with the leftmost column in the table.

To see the problem with the image, just write your own page and put a
border at the bottom of an image.

Another problem is getting the right column to space out properly. With
FireFox it looks perfect. With Konqueror they are too close and with IE
they are too far apart. I've read that IE treats height and width as
suggestions, but it apparently also feels that in doing its
calculations, it should ignore position tags too. To be fair, so does
FireFox, but at least it allowed me to build a div box around things to
position them properly. With Konqueror the problem is mainly the font
sizes it uses.

Erm, two things.

1. Please open your own thread instead of hijacking someone else's.
That's lame.

2. Why is everyone telling me to validate? How does that have anything
to do with it? Anyways, I fixed this problem by applying a width to my
absolute DIV... that seemed to punch firefox into submission.

 

[eslachance]

Hmn. nevermind, google groups seemed to have messed this one up
himself, i just realized the post titles were different. wtf?

 

[eslachance]

Hmn. nevermind, google groups seemed to have messed this one up
himself, i just realized the post titles were different. wtf?

 

[Mark Parnell]

Hmn. nevermind, google groups seemed to have messed this one up
himself, i just realized the post titles were different. wtf?

No, Gary posted it as a reply to your original post - that's why it
appears as part of the same thread. But let's give him the benefit of
the doubt - it was probably an accident.

BTW: Don't forget to quote the text you are replying to. ;-)

 

[Joel Shepherd]

Why is everyone telling me to validate?

Because validation can catch some fundamental errors in your markup,
errors that will trip up browsers and that you might not be sharp enough
to catch yourself. That's not meant as an insult. The fact is that
presented with a page of markup, a validator will flawlessly and
reliably pick out badly-formed constructs, whereas your weary eyes are
nowhere near as reliable.

Sometimes those fundamental errors are the cause of the observed
problem. It makes sense to use a tool like a validator first and correct
any badly-formed markup, _before_ calling in the meatware for help.
It'll save you and everyone else time.

 

[Gary Dale]

No, Gary posted it as a reply to your original post - that's why it
appears as part of the same thread. But let's give him the benefit of
the doubt - it was probably an accident.

BTW: Don't forget to quote the text you are replying to. ;-)

My apologies to everyone. I've been having trouble getting messages to
post for some reason. If I post to alt.html, it never shows up. I tried
doing a reply to then changing the subject line, hoping it would create
a new thread, but it didn't.

Anyway, I solved my major problem. It appears that the cellspacing html
attribute defaults to a non-zero value and there is no corresponding css
value to set. I need to specify cellspacing="0" in every table I create.

I'm still not sure what's happening with the images - why they seem to
have a bottom spacing - but that's not as critical.

 

[Jonathan N. Little]

My apologies to everyone. I've been having trouble getting messages to
post for some reason. If I post to alt.html, it never shows up. I tried
doing a reply to then changing the subject line, hoping it would create
a new thread, but it didn't.

In Thunderbird hitting reply then changing the message subject does not
create a new thread, like I have modified the subject in this message.
To create a new thread you can either click and highlight the appropriate
newsgroup in the folder window on the left then click the new message
button, or click the new message button and the "To:" with the dropdown
to "Newsgroup:" and type in the newsgroup "alt.html"...The important
thing is you must click the "New Message" button to create a new thread
not the "Reply" button.