«

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.

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

In our last episode, <> pronounced to alt.html:

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

--
Mark Parnell
http://clarkecomputers.com.au
alt.html FAQ :: http://html-faq.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')">&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.

--
Vladdy
http://www.klproductions.com

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

-->

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.

--
Dylan Parry
http://webpageworkshop.co.uk -- FREE Web tutorials and references

Dylan Parry wrote:
> 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.
>

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.

Hijacking my thread, Gary Dale wrote:
> Dylan Parry wrote:
> > 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.
> >
>
> 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.

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

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