Closed
Bug 301373
Opened 20 years ago
Closed 20 years ago
FLOATed div is resized when the text size is reduced to very small.
Categories
(Core :: Layout: Floats, defect)
Tracking
()
People
(Reporter: ws.bugzilla, Unassigned)
References
()
Details
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.8) Gecko/20050511 Firefox/1.0.4
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.8) Gecko/20050511 Firefox/1.0.4
When the text size is reduced by a lot, the floated div's on the left and right
suddenly grow in size.
When the text size is increased by a lot, the left floated div also grows by
about a pixel.
Reproducible: Always
Steps to Reproduce:
1. Load the URL http://www.starkov.name/t/layout1
2. Increase or decrease font size by A LOT!
Actual Results:
The left and right div become higher.
Expected Results:
The left and right div should stay as they are.
If you specify the height of the divs, the problem is different. I'm not sure if
it's the same bug or not, but here's a demo:
http://www.starkov.name/t/layout1/index1.htm
If you decrease text size by a lot, the LEFT float works, but the image in the
RIGHT float jumps down (even though the float itself stays where it should).
|
||
Comment 2•20 years ago
|
||
The first problem (gap under the image) is bug 22274.
The reason you don't see this gap in the second testcase is that you made it
overflow (add <style>div div { overflow:auto; }</style>) and you will see what
I mean. The gap above the image is simply that the image follows the baseline
which moves down as you increase the line-height (font), you could fix that
by "img {vertical-align: top;}" but you would still have the gap under the
image. One workaround is to set the line-height to zero, for example in your
testcases: "div div {line-height:0;}"
Or you could avoid Standards compliance mode (see bug 22274).
The layout in Mozilla is correct per the CSS 2.1 spec.
*** This bug has been marked as a duplicate of 22274 ***
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → DUPLICATE
*** Bug 301417 has been marked as a duplicate of this bug. ***
In the case where you INCREASE the font size, this is indeed a duplicate of bug
22274. The reasoning there makes sense to me, and the images in the test case
should probably be set to "display:block".
However, when you REDUCE the font size, the bug reported here is different.
Reducing the font size reduces the line-height, so the sudden appearance of the
gaps above and below the image has nothing to do with line-height.
Please re-open the bug and adjust the summary accordingly.
|
|
||
Comment 5•20 years ago
|
||
(In reply to comment #4)
Timwi, are you seeing that in current nightly builds?
It works fine for me in current builds on Windows XP and Linux.
|
|
||
Comment 6•20 years ago
|
||
FYI, Firefox 1.0.x is using a layout engine from April 2004... It's pretty
pointless to test layout issues in it at this point.
*** This bug has been marked as a duplicate of 22274 ***
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago → 20 years ago
Resolution: --- → DUPLICATE
> FYI, Firefox 1.0.x is using a layout engine from April 2004...
Then release a new one, for crying out loud.
You need to log in
before you can comment on or make changes to this bug.
Description
•