289305 - Attempting to 'float' a large word as the first in a para. doesn't work consistently

Status: RESOLVED INVALID

(Core :: Layout: Text and Fonts, defect)

Description

[Ken Monk]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.7.6) Gecko/20050321 Firefox/1.0.2
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.7.6) Gecko/20050321 Firefox/1.0.2

The floating of the first word in large letters at the start of a para works in
both IE and Opera, but not in either Firefox or Mozille suite browser
(Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.3) Gecko/20040910).  Tha
page above with the problem is from the author of the book I'm trying to learn
CSS from.

Reproducible: Always

Steps to Reproduce:
1. simply load the page.
2.
3.

Actual Results:  
What should be the initial large word is displayed in the wrong place!

Expected Results:  
It should be at the start of the para. with the rest of the text floating round
it, as works in Opera and IE.

Comment 1

[Gabriel Chadwick]

I get this to in Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b2)
Gecko/20050406 Firefox/1.0+

I am wondering if this is not a problem with the web page coding. Not confirming
because wating for someone the confirm the problem is with ff.

Comment 2

[simon annear]

This page does not validate with the w3c validator
(http://validator.w3.org/check?uri=http%3A%2F%2Fwww.photowebpublish.com%2Fabout.html)

however, I don't think that this this is the cause of the problem - would
certainly be nice if the page was w3c compliant first.

I can confirm that there is a visual difference between mozilla app suite and
IE.  On mozilla the word "explanation" should be aligned with the top of the
paragraph

Comment 3

[Boris Zbarsky [:bzbarsky]]

Mozilla's rendering is correct (and Opera 8's rendering is the same as
Mozilla's; previous versions of Opera had a known bug in float handling).

To see why this is the correct layout, see
http://www.w3.org/TR/CSS21/visuren.html#float-position starting at "Here are the
precise rules that govern the behavior of floats".  The rule of interest to us is:

  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.

Now in this case, the page has a photo floated to the right.  This photo comes
before the floated "explanation" span, so the top of the span can't be above the
top of the photo.  Which is exactly what Mozilla does.

I'd like to point out that validity of the page is not really relevant here (and
is in fact rarely relevant; it's very simple to write pages that are perfectly
valid syntactically and still depending on known bugs in browsers for correct
rendering.  So actually looking at the page is more useful than a knee-jerk
validation, most of the time).