Floating Div problem

[Michael Bernstein]

Hello,

I've tried to solve this problem six ways from sunday, but I'm
conceding defeat and asking for help at this point.

The following site is rendering *very* oddly in Mozilla only. IE seems
to lay it out just fine:

http://pythonphotos.org

The images included in the page which should be floating below the
second H2, are instead pushed all the way to the bottom of the page
(but just above the footer). Adding an element below the images with
'clear: both' didn't help either.

You can see the same problem on a detail page as well:

http://pythonphotos.org/archive/181/view

I've tried using extra spans, containing divs, and adjusting the CSS
in just about every way I can think of, all to no avail. IE
(ironically enough) renders the site as intended, and Mozilla doesn't.

Any suggestions?

- Michael Bernstein

[Alan J. Flavell]

Re: Floating Div problem

On Mon, 10 May 2004, Michael Bernstein wrote:
[color=blue]
> I've tried to solve this problem six ways from sunday, but I'm
> conceding defeat and asking for help at this point.[/color]

Validate first. Ask questions afterwards.

The "bookmarkle ts" at W3C make validation very easy; or you might
prefer the "web developer's toolbar" for Mozilla/Firefox at

http://www.chrispederick.com/work/firefox/webdeveloper/

Fiddling with details is futile until the groundwork had been done.
Honestly - no matter what the tag-soup slurpers will want you to
believe.

[Michael Bernstein]

Re: Floating Div problem

"Alan J. Flavell" <flavell@ph.gla .ac.uk> wrote in message news:<Pine.LNX. 4.53.0405102326 400.29721@ppepc 56.ph.gla.ac.uk >...[color=blue]
> On Mon, 10 May 2004, Michael Bernstein wrote:
>[color=green]
> > I've tried to solve this problem six ways from sunday, but I'm
> > conceding defeat and asking for help at this point.[/color]
>
> Validate first. Ask questions afterwards.
> [snippage]
> Fiddling with details is futile until the groundwork had been done.
> Honestly - no matter what the tag-soup slurpers will want you to
> believe.[/color]

The invalidity was minor, and only put into otherwise valid CSS in
order to fix an oddity in IE5's rendering of table text a bit too big.
I've removed it now, the HTML and CSS validate, and my Mozilla
rendering problem remains.

Help, please?

- Michael Bernstein

[Neal]

Re: Floating Div problem

On 10 May 2004 21:43:48 -0700, Michael Bernstein <webmaven@cox.n et> wrote:
[color=blue]
> The invalidity was minor, and only put into otherwise valid CSS in
> order to fix an oddity in IE5's rendering of table text a bit too big.
> I've removed it now, the HTML and CSS validate, and my Mozilla
> rendering problem remains.
>
> Help, please?[/color]

What's this width hack you're using? Seems to me this might be a cause of
trouble. Try eliminating the hack and see if it solves the issue.

[Michael Bernstein]

Re: Floating Div problem

Neal wrote:
[color=blue]
> On 10 May 2004 21:43:48 -0700, Michael Bernstein <webmaven@cox.n et> wrote:
>[color=green]
>> The invalidity was minor, and only put into otherwise valid CSS in
>> order to fix an oddity in IE5's rendering of table text a bit too big.
>> I've removed it now, the HTML and CSS validate, and my Mozilla
>> rendering problem remains.
>>
>> Help, please?[/color]
>
> What's this width hack you're using?[/color]

It's the box-model hack, a work-around for an IE rendering bug:

http://css-discuss.incutio.com/?page=BoxModelHack

[color=blue]
> Seems to me this might be a cause
> of trouble. Try eliminating the hack and see if it solves the issue.[/color]

OK, I removed it. Now IE5 looks worse, and Mozilla no better. IE6 now
has the best rendering.

What should I try next?

- Michael Bernstein

[Barry Pearson]

Re: Floating Div problem

Michael Bernstein wrote:[color=blue]
> Hello,
> I've tried to solve this problem six ways from sunday, but I'm
> conceding defeat and asking for help at this point.
> The following site is rendering *very* oddly in Mozilla only. IE seems
> to lay it out just fine:
> http://pythonphotos.org
>
> The images included in the page which should be floating below the
> second H2, are instead pushed all the way to the bottom of the page
> (but just above the footer). Adding an element below the images with
> 'clear: both' didn't help either.[/color]
[snip]

I don't know why, but I think your sidebars on the right are interfering. You
float several of them right, and clear them, so I would have thought this
should work. But something I don't understand is then intefering with what is
on the left.

Try a different approach. Put *all* the sidebar on the right into a single
container. (Eg. just remove the </div><div> between them). This may cause what
is on the left to work.

I notice that your page looks OK in Opera 7.23 as well as IE. That is a bit
suspicious. Are you pushing the boundaries a bit?

--
Barry Pearson

http://www.Barry.Pearson.name/photography/

http://www.BirdsAndAnimals.info/

http://www.ChildSupportAnalysis.co.uk/

[Michael Bernstein]

Re: Floating Div problem

Barry Pearson wrote:
[color=blue]
> Michael Bernstein wrote:
>[color=green]
>>Hello,
>>I've tried to solve this problem six ways from sunday, but I'm
>>conceding defeat and asking for help at this point.
>>The following site is rendering *very* oddly in Mozilla only. IE seems
>>to lay it out just fine:
>>http://pythonphotos.org
>>
>>The images included in the page which should be floating below the
>>second H2, are instead pushed all the way to the bottom of the page
>>(but just above the footer). Adding an element below the images with
>>'clear: both' didn't help either.[/color]
>
> [snip]
>
> I don't know why, but I think your sidebars on the right are interfering. You
> float several of them right, and clear them, so I would have thought this
> should work. But something I don't understand is then intefering with what is
> on the left.
>
> Try a different approach. Put *all* the sidebar on the right into a single
> container. (Eg. just remove the </div><div> between them). This may cause what
> is on the left to work.[/color]

Ah-ha! This is progress!

I did as you suggested, and the problem went away! I then experimented
with putting some of the </div><div> back and came to this conclusion:

If the sidebar 'breaks' below the top of the floated image, the image
then moves down to the top of the sidebar. So, by making sure that the
sidebar only breaks once at the top of the page (as it is set now) I
avoid interfering with the layout.

This is all *very* confusing though. *why* should the right sidebars
interfere with the left floated image in this way? By everything I
understand of CSS, that shouldn't happen unless the floated image is
'clear: right', which it isn't.
[color=blue]
> I notice that your page looks OK in Opera 7.23 as well as IE. That is a bit
> suspicious. Are you pushing the boundaries a bit?[/color]

I didn't think I was doing anything particularly tricky. Even the
simplified box-model hack I was using before to fix IE5 was (I thought)
relatively tame.

A few minor tweaks to widths and margins, and the (modified) layout
works perfectly on Mozilla and IE6. IE5 still has a few minor problems,
but I can fix those again with the box-model hack.

Before I give up on splitting the sidebar div, could this be a bug in
Mozilla? Or *am* i doing something tricky without realizing it?

- Michael Bernstein

[Barry Pearson]

Re: Floating Div problem

Michael Bernstein wrote:[color=blue]
> Barry Pearson wrote:[/color]
[snip][color=blue][color=green]
>> Try a different approach. Put *all* the sidebar on the right into a
>> single container. (Eg. just remove the </div><div> between them).
>> This may cause what is on the left to work.[/color]
>
> Ah-ha! This is progress!
>
> I did as you suggested, and the problem went away! I then experimented
> with putting some of the </div><div> back and came to this conclusion:[/color]

Glad to help.

[snip][color=blue]
> This is all *very* confusing though. *why* should the right sidebars
> interfere with the left floated image in this way? By everything I
> understand of CSS, that shouldn't happen unless the floated image is
> 'clear: right', which it isn't.[/color]

I agree. If you had hit the problem with IE, I would just have shrugged. IE
can be very buggy indeed with floats. Sometimes it is simply non-compliant;
sometimes it just chooses to throw half your content away!

But I simply couldn't spot anything you were doing wrong! Perhaps it is in the
small print about floats, which governs their highest point. But not only did
you have a clearing div, I copied your HTML & CSS into Dreamweaver, and
cleared your headers left too. Yet the images still went below the headers. If
this is compliant behaviour, it has opened up a whole new area of the spec.

[snip][color=blue]
> Before I give up on splitting the sidebar div, could this be a bug in
> Mozilla? Or *am* i doing something tricky without realizing it?[/color]

I hate to stick my neck out, but this could be a bug in Mozilla that is not in
IE & Opera! I just don't know - you are on your own.

--
Barry Pearson

http://www.Barry.Pearson.name/photography/

http://www.BirdsAndAnimals.info/

http://www.ChildSupportAnalysis.co.uk/

[Brian]

Re: Floating Div problem

Barry Pearson wrote:
[color=blue]
> Perhaps it is in the small print about floats, which governs their
> highest point. But not only did you have a clearing div, I copied
> your HTML & CSS into Dreamweaver, and cleared your headers left too.
> Yet the images still went below the headers. If this is compliant
> behaviour, it has opened up a whole new area of the spec.
>
> I hate to stick my neck out, but this could be a bug in Mozilla that
> is not in IE & Opera![/color]

It is a bug in Mozilla, as L. Raittali has pointed out in the past.
Mozilla pushes floats down when it shouldn't. Opera gets it right. IIRC,
in tests that I created, IE/Win got it wrong, too.

--
Brian (remove "invalid" from my address to email me)

http://www.tsmchughs.com/

[Barry Pearson]

Re: Floating Div problem

Brian wrote:[color=blue]
> Barry Pearson wrote:[/color]
[snip][color=blue][color=green]
>> I hate to stick my neck out, but this could be a bug in Mozilla that
>> is not in IE & Opera![/color]
>
> It is a bug in Mozilla, as L. Raittali has pointed out in the past.
> Mozilla pushes floats down when it shouldn't. Opera gets it right.
> IIRC, in tests that I created, IE/Win got it wrong, too.[/color]

Thanks for that. I've been desperately looking without success at the small
print.

In *this* case, it appears that IE (5 & 6) / Win got it right too.

(Sigh! If we can't even rely on IE being the one that is wrong ... !)

--
Barry Pearson

http://www.Barry.Pearson.name/photography/

http://www.BirdsAndAnimals.info/

http://www.ChildSupportAnalysis.co.uk/

[Michael Bernstein]

Re: Floating Div problem

Barry Pearson wrote:[color=blue]
>
> Brian wrote:[color=green]
>>
>>It is a bug in Mozilla, as L. Raittali has pointed out in the past.
>>Mozilla pushes floats down when it shouldn't. Opera gets it right.
>>IIRC, in tests that I created, IE/Win got it wrong, too.[/color]
>
> Thanks for that. I've been desperately looking without success at the small
> print.
>
> In *this* case, it appears that IE (5 & 6) / Win got it right too.
>
> (Sigh! If we can't even rely on IE being the one that is wrong ... !)[/color]

Susanne Jaeger (on the css-d mailing list) pointed out that according to
the spec, Mozilla's implementation may be the correct one:

http://www.w3.org/TR/2004/CR-CSS21-20040225/visuren.html#float-position

"5. The outer top of a floating box may not be higher than the outer
top of any block or floated box generated by an element earlier in the
source document"

If this interpretation of the spec is correct, Mozilla's implementation
would be more conformant, but less intuitive (at least to me). This
might qualify as a bug in the specification, because it doesn't seem to
take element nesting into account.

The behavior I would expect (as a designer) would be something more like:

"5. The outer top of a floating box may not be higher than the outer top
of any block or floated box generated by an element earlier in the
source document that is directly within the same containing block."

Cheers,

- Michael Bernstein

[Michael Bernstein]

Re: Floating Div problem

Brian wrote:[color=blue]
>
> Barry Pearson wrote:
>[color=green]
>> Perhaps it is in the small print about floats, which governs their
>> highest point. But not only did you have a clearing div, I copied
>> your HTML & CSS into Dreamweaver, and cleared your headers left too.
>> Yet the images still went below the headers. If this is compliant
>> behaviour, it has opened up a whole new area of the spec.
>>
>> I hate to stick my neck out, but this could be a bug in Mozilla that
>> is not in IE & Opera![/color]
>
> It is a bug in Mozilla, as L. Raittali has pointed out in the past.
> Mozilla pushes floats down when it shouldn't. Opera gets it right. IIRC,
> in tests that I created, IE/Win got it wrong, too.[/color]

Brian, I've googled around a bit, and can't find any reference to 'L.
Raittali'. Can you give a URL to the appropriate bug report?

Thanks,

- Michael Bernstein

[Barry Pearson]

Re: Floating Div problem

Michael Bernstein wrote:[color=blue]
> Barry Pearson wrote:[/color]
[snip][color=blue][color=green]
>> Thanks for that. I've been desperately looking without success at
>> the small print.[/color][/color]
[snip][color=blue]
> Susanne Jaeger (on the css-d mailing list) pointed out that according
> to the spec, Mozilla's implementation may be the correct one:
> http://www.w3.org/TR/2004/CR-CSS21-2...float-position
>
> "5. The outer top of a floating box may not be higher than the outer
> top of any block or floated box generated by an element earlier in the
> source document"
>
> If this interpretation of the spec is correct, Mozilla's
> implementation would be more conformant, but less intuitive (at least
> to me). This might qualify as a bug in the specification, because it
> doesn't seem to take element nesting into account.[/color]

Chuckle! Thanks. That has given me something to go on. I 10% suspected it in
my earlier post, when I said "Perhaps it is in the small print about floats,
which governs their highest point". I have fallen foul of this in the past.
[color=blue]
> The behavior I would expect (as a designer) would be something more
> like:
>
> "5. The outer top of a floating box may not be higher than the outer
> top of any block or floated box generated by an element earlier in the
> source document that is directly within the same containing block."[/color]

Remember - CSS1 (which introduced floats) was *explicitly* not a layout
language. Perhaps we can't complain if we try to treat it like one, and fail.

http://www.w3.org/TR/REC-CSS1#appendix-e

I put complex stuff into floated boxes. But then I float the entire box.
Perhaps that is the lesson for you. (Or use absolute positioning. Or a simple
layout table).

Good luck - you appear to have enough clues to publish something useful.

--
Barry Pearson

http://www.Barry.Pearson.name/photography/

http://www.BirdsAndAnimals.info/

http://www.ChildSupportAnalysis.co.uk/

[Andy Mabbett]

Re: Floating Div problem

In message <Pine.LNX.4.53. 0405102326400.2 9721@ppepc56.ph .gla.ac.uk>,
Alan J. Flavell <flavell@ph.gla .ac.uk> writes[color=blue]
>The "bookmarkle ts" at W3C make validation very easy;[/color]

Alternative Bookmarklets:

<http://www.squarefree. com/bookmarklets/>

(includes those for many other functions, not related to validation, and
for several browser types).
[color=blue]
> or you might prefer the "web developer's toolbar" for Mozilla/Firefox
>at http://www.chrispederick.com/work/firefox/webdeveloper/[/color]

An alternative toolbar for web developers using IE5/6:

<http://www.nils.org.au/ais/web/resources/toolbar/update.html>
--
Andy Mabbett
"The Internet is a reflection of our society[ ...]. If we do not like what we
see in that mirror the problem is not to fix the mirror, we have to fix
society." Vint Cerf

[Brian]

Re: Floating Div problem

Michael Bernstein wrote:
[color=blue]
> Brian, I've googled around a bit, and can't find any reference to 'L.
> Raittali'.[/color]

Sorry for the wild goose chase. "L. Raittali" is none other than our own
Lauri Raittila. Yes, I mispelled the last name, my apolgies to you and
him. LR is a ciwas regular, an Opera evengelist of sorts, and one of the
better css debuggers I've met. And he knows the spec rather well, too.
[color=blue]
> Can you give a URL to the appropriate bug report?[/color]

Normally, I'd make you find it, but I already sent you on fruitless
search. :-)

http://groups.google.com/groups?selm=MPG.1a771a7718a72ff5989e07%40news.cis.dfn.de

Read other messages in that thread, too, for some context.

HTH
--
Brian (remove "invalid" from my address to email me)

http://www.tsmchughs.com/