If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

When using css float: left; for an image in a text, the image is not set properly when there are other areas of text floating beside the area where the image should is displayed

RESOLVED INVALID

Status

()

Core
Layout
RESOLVED INVALID
13 years ago
13 years ago

People

(Reporter: Marc, Unassigned)

Tracking

({testcase})

Trunk
x86
Windows XP
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments, 2 obsolete attachments)

578 bytes, text/html
Details
648 bytes, text/html
Details
(Reporter)

Description

13 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; de-DE; rv:1.7.6) Gecko/20050226 Firefox/1.0.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; de-DE; rv:1.7.6) Gecko/20050226 Firefox/1.0.1

An image in a div is set to appear on the top of another div floating right of
the div the image is in.
(see attachment for a demonstration)

Reproducible: Always



Expected Results:  
The image should appear at the place the image tag is inside the text as it does
without using "align". 
The page validates as XHTML 1.0 strict and is shown in standards compliance mode.
(Reporter)

Comment 1

13 years ago
Created attachment 176024 [details]
demonstration for the align error

Comment 2

13 years ago
(In reply to comment #1)

In the attachment, if you move the <div id="info2"> block below the <div
id="content"> block, it seems to work properly with the image at the top of the
content.
(Reporter)

Comment 3

13 years ago
But then, if you shorten the text in info1, info2 will no longer be directly
under it, but will start below the content.

Comment 4

13 years ago
HOw about minimizing that testcase. It can be made much smaller.
Assignee: firefox → nobody
Component: General → Layout
Keywords: testcase
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → Trunk
(Reporter)

Comment 5

13 years ago
Created attachment 176114 [details]
testcase

Ok, here's a smaller version.
Attachment #176024 - Attachment is obsolete: true

Comment 6

13 years ago
Created attachment 176115 [details]
Smaller testcase

Updated

13 years ago
Attachment #176114 - Attachment is obsolete: true
So... What is the bug, exactly?  The last testcase shows that when a floated
image is replaced by its alt text we don't float the alt text.  Is that the
issue?  If not, please attach a testcase that shows the problem that this bug is
actually filed on (using https://bugzilla.mozilla.org/mozilla-banner.gif as the
image as needed).
(Reporter)

Comment 8

13 years ago
Created attachment 176240 [details]
testcase

It's not only the alt text that is not floatet. The alt text is placed where
the image is shown (if it is loaded). And both are not placed correctly. The
image (or alt text) should be left-top in front of the text.
No, in that testcase the top of the left-floated image should be even with the
top of "right float 2".  See
<http://www.w3.org/TR/CSS21/visuren.html#float-position> and particularly rule 5
of the "Here are the precise rules that govern the behavior of floats:" list,
which says:

  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.

(in your case both of the right floats are earlier in the source document, and
the content div does not define a new block formatting context, so this rule
applies).

Marking invalid, if that's the testcase showing the bug...
Status: UNCONFIRMED → RESOLVED
Last Resolved: 13 years ago
Resolution: --- → INVALID
(Reporter)

Comment 10

13 years ago
(In reply to comment #9)

> which says:
> 
>   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.
> 
> (in your case both of the right floats are earlier in the source document, and
> the content div does not define a new block formatting context, so this rule
> applies).
> 

After this rule the floating image can not be higher than any of the right
floats. But here it is not higher than the last right float which came directly
before the image. The image should not be higher than any of the floats but have
the same top as the first right float. As I understand this rule this should be
possible.

> After this rule the floating image can not be higher than any of the right
> floats. 

More precisely, given any right float, the image cannot be higher than it.  So
it can't be higher than the last right float.

> but have the same top as the first right float

Then it would be higher than the second float, violating the rule in question.
(Reporter)

Comment 12

13 years ago
Well, ok. But then there is no way to have a layout with 2 coloumns and one of
this coloums be parted in 2 areas where there is a floating image in the other area?
'Cause thats exactly what I wanted to do with this combination.

Comment 13

13 years ago
(In reply to comment #12)
> Well, ok. But then there is no way to have a layout with 2 coloumns 

There are several alternatives how to achieve this, here is one example:
http://www.bluerobot.com/web/layouts/

Just google this and you will get tons of hits
(Reporter)

Comment 14

13 years ago
> > Well, ok. But then there is no way to have a layout with 2 coloumns 
> 
> There are several alternatives how to achieve this, here is one example:

It's not only about having 2 coloumns. I already have 2 coloumns. But even when
using the Three Column Layouts from your link you will run into the same
problems I posted as bug here. Because in the rightmost coloumn there you won't
be able to have a floating image at the beginning of the text.
The problem is only about floating images.


Just make sure all the columns are block reflow context roots (the CSS spec has
several ways to accomplish this).
You need to log in before you can comment on or make changes to this bug.