247213 - Image alignment problem when using ALIGN and BR CLEAR="ALL" inside a OL tag

Status: RESOLVED DUPLICATE of bug 148994

(Core :: Layout: Floats, defect)

Description

[Walt Stoneburner]

User-Agent:       Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.7) Gecko/20040531 Firefox/0.8.0+
Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.7) Gecko/20040531 Firefox/0.8.0+

The <BR CLEAR="ALL"> tag is supposed to skip down until after whatever IMG tag
that has been ALIGN'd LEFT or RIGHT is rendered.  Firefox does this just fine,
unless the image is inside of an ordered list tag and a LI element has been
encountered.  The result is that the BR tag is ignored, and the page renders
incorrectly in Firefox, but not other browsers.  (This makes perfect sense when
you see the code in action.)

Reproducible: Always
Steps to Reproduce:
This works:
<UL><LI><IMG ALIGN="RIGHT">...<BR CLEAR="ALL"></UL>

However in this example, the BR tag is ignored!
<UL><LI><IMG ALIGN="RIGHT">...<LI>...<BR CLEAR="ALL"></UL>



Actual Results:  
Since the BR tag is ignored, code like this ends up stacking images until they
roll off the left side of the screen:

<UL>
<LI><IMG ALIGN="RIGHT">...
<LI>...
<LI>...<BR CLEAR="ALL">
<LI><IMG ALIGN="RIGHT">...
<LI>...
<LI>...<BR CLEAR="ALL">

<LI><IMG ALIGN="RIGHT">...
<LI>...
<LI>...<BR CLEAR="ALL">
</UL>


Expected Results:  
The software should have honored the BR tag, skipping down the page.

As you see in the sample URL, which was validated by an HTML validator as
correct, it makes it difficult to put multiple instructional bullet points by a
single image.

What I suspect is happened is that the image is considered to be inside the list
element:  <LI><IMG/></LI>

This is explains why a break also works when it, too, is inside the list
element: <LI><IMG ALIGN="RIGHT"/><BR CLEAR="ALL"/></LI>

However, when a break occurs outside the context of the list element that
contains the image, the "context" is lost, and therefore it renders with no effect:
<LI><IMG ALIGN="RIGHT"/></LI><LI><BR CLEAR="ALL"/></LI>

The BR tag in the second list element should be aware that a graphic element is
being rendered to the right, and therefore should break when encountered.

All other browsers I've tried this on render the page as expected.

I know of no other way to render a graphic with a subset of list elements down
the left side.

Comment 1

[HARUNAGA Hirotoshi]

-> browser
dup of Bug 163110?

Comment 2

[Walt Stoneburner]

My vote is that this is NOT a duplicate.

The issue in bug 163110 is that images stack to the left, as well they should left to their own devices.

The issue in this bug is that when you issue the command <BR CLEAR="ALL"> which is supposed to be 
the HTML for resolving the behavior reported in bug 163110, it doesn't work.

<BR CLEAR="ALL"> is supposed to say "please advance the page to the point beyond the image's height 
so that it won't stack [as shown in 163110]."

Comment 3

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

I don't see any differences between how Mozilla displays the page and how Opera
displays it.

Comment 4

[Walt Stoneburner]

(In reply to comment #3)
> I don't see any differences between how Mozilla displays the page and how Opera
> displays it.

Very curious; while I *love* Firefox, it even behaves as I described on Windows.

I tried it with the latest Opera, latest Internet explorer, and latest Firefox.  

I've posted some screen shots so you can see side-by-side comparison, along with a picture of how I 
think the HTML tree is parsing things, resulting in an explation for the observations.

http://www.wwco.com/~wls/MOZILLABUG/BUG247213.html

Comment 5

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

It doesn't look anything remotely like that for me.

Comment 6

[Boris Zbarsky [:bzbarsky]]

This was fixed by bug 148994 (the clear was being ignored since the <li> didn't
overlap the float due to the float-edge styles).

*** This bug has been marked as a duplicate of 148994 ***