167792 - Paragraphs not respected with float: left; clear:left images

Status: VERIFIED INVALID

(Core :: Layout, defect)

Description

[John Waterworth]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.1) Gecko/20020826
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.1) Gecko/20020826

My style sheet contains this class:
  img.icon { float: left; clear: left; padding-right: 0.5em; }

My page contains:
  <p><a href="large1"><img src="thumb1" class="icon"></a>Text for picture 1</p>
  <p><a href="large2"><img src="thumb2" class="icon"></a>Text for picture 2</p>
  ...

The images end up stacked on top of each other on the left with no gap between
each image, and the text is stacked on the right.  The image and text in each
paragraph don't appear next to each other.

The image and text for each paragraph should appear next to each other with the
image floating to the left.  There should be a gap between the content of each
paragraph.

Reproducible: Always

Steps to Reproduce:
1. Create a class like this:
  img.icon { float: left; clear: left; padding-right: 0.5em; }
2. Create a page with content like this:
  <p><a href="large1"><img src="thumb1" class="icon"></a>Text for picture 1</p>
  <p><a href="large2"><img src="thumb2" class="icon"></a>Text for picture 2</p>
  ...

3. Open the page.

Actual Results:  
[ thumb1 ] Text for 
[ thumb1 ] picture 1
[ thumb1 ] Text for 
[ thumb2 ] picture 2
[ thumb2 ] ...
[ thumb2 ]
...

Expected Results:  
[ thumb1 ] Text for
[ thumb1 ] picture 1
[ thumb1 ]

[ thumb2 ] Text for
[ thumb2 ] picture 2
[ thumb2 ]

[ ...    ] ...

Comment 1

[Mats Palmgren (inactive)]

Attachment: Testcase

Comment 2

[Mats Palmgren (inactive)]

I think this is how it's supposed to look.

Comment 3

[Boris Zbarsky [:bzbarsky]]

Yep. Mats is correct.  If you don't want the text of the next <p> to start till
you're below the floating image, the <p> should have clear:left on it.....

Comment 4

[John Waterworth]

Thanks for the advice on clear: left, should have spotted that, but sometimes
the harder you look...

So now I've got a page like this:  
[ thumb1 ] Text for 
[ thumb1 ] picture 1
[ thumb1 ] 
[ thumb2 ] Text for 
[ thumb2 ] picture 2
[ thumb2 ]
...

But was expecting gaps between the content of each paragraph:
[ thumb1 ] Text for
[ thumb1 ] picture 1
[ thumb1 ]

[ thumb2 ] Text for
[ thumb2 ] picture 2
[ thumb2 ]

[ ...    ] ...

And I know it's a bit rude to compare but IE, Opera and Amaya all leave gaps
between the paragraphs.

Comment 5

[Boris Zbarsky [:bzbarsky]]

Sorry, but those browsers are all wrong in this case. unless you've put a bottom
margin on the floating images, of course...

Comment 6

[Hixie (not reading bugmail)]

Yup. Looks like the page has been corrected and now uses margins to spread out
the images. INVALID.

Comment 7

[Mats Palmgren (inactive)]

v