Previous Message
Next Message

unexpected Firefox behavior

Sent by Bruno Fassino on 4 October 2007 21:09


Alan Gresley wrote:
> Philippe Wittenbergh  wrote:
>
>> On Oct 4, 2007, at 2:02 PM, Erin Spangler wrote:

>>> Relevant HTML:  (http://www.bluegenefrenchies.com/french-bulldog-
>>> girls.html)
>>
>> The large image on the left (sweetpea-metal2.jpg) in a <p> with class
>> floatleft is pushing down the two images in the p with class
>> floatright. Correct behaviour. Then the 3rd image (sweetpea-
>> metal5.jpg) moves up and to the right of the image #2, that sounds
>> correct as well. iCab, WebKit and Safari all show the same thing.

> Hi Philippe
>
> I would disagree with you on your last point since the
> 3rd`image is layered over a float and I believe that should
> only happen if the 3rd image had a negative bottom margin.
> Having done a test [1], I would believe that Opera shows the
> correct behavior and it is the ambiguous nature of the markup
> that leads to the wrong behavior as seen in FF, iCab, WebKit
> and Safari (I can only check in FF). IE as 'usual' is just
> showing it's bugs with hasLayout and floats.
>
> [1] <http://css-class.com/test/imagesoverfloats.htm>


Indeed Gecko and Safari seem to have a small problem with this type of
construction.
I haven't looked too carefully, but for Gecko it may be related to this bug
[1].
Essentially when they position the third image (inline inside a not floated
paragraph) they only look at the first float to decide how to displace it.
But since it vertically clashes with the second float they should take that
second float into account as well.
BTW, the problem also shows up with simple text (when using suitable
dimensions). See this test case [2]: the non-floated text partially overlaps
the second float (change font-size if necessary to make the problem more
evident.)

Bruno


[1] https://bugzilla.mozilla.org/show_bug.cgi?id=25888
[2] http://www.brunildo.org/test/test/Gecko2floatop.html

--
Bruno Fassino http://www.brunildo.org/test

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: