Closed Bug 305077 Opened 19 years ago Closed 19 years ago

Extra "padding" are added to bottom of DIV if you combine padding-left / padding-right with overflow:hidden / overflow:auto. If you remove one of them padding or overflow... then problem is gone.

Categories

(Firefox :: General, defect)

x86
Windows XP
defect
Not set
normal

Tracking

()

RESOLVED WORKSFORME

People

(Reporter: krudtaa, Unassigned)

References

()

Details

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.10) Gecko/20050716 Firefox/1.0.6
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.10) Gecko/20050716 Firefox/1.0.6

See attached code below for demonstation of bug.
Explanation in code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<br><br>
<center>
<div style="width:40%; background-color:#D4DDFF; margin:0; padding:20px 20px;
text-align:left; overflow:hidden; font-family:arial,sans-serif;"> <!--
height:auto; this div is for controlling padding in an easy way -->
1. Make the DIV container smaller by making the viewport smaller.<br><br>
Why does overflow:hidden / overflow:auto cause extra padding at bottom of the
DIV when values are assigned to either padding-left or padding-right.
<br><br>
The extra "padding" at bottom gets bigger if you make the div smaller.<br><br>
If you remove overflow:hidden / overflow:auto then the extra space at bottom is
gone.
Or if you remove padding-left and padding-right, extra space is also
gone.....<br><br>
Combination of overflow:hidden / overflow:auto and padding-left / padding-right
provokes this bug.<br><br>
Have just seen this bug in FF.... Tested in FF 1.0.6 and FF 1.0.5 with same result.
<br><br>
This is just some fill text. This is just some fill text. This is just some fill
text.
This is just some fill text. This is just some fill text. This is just some fill
text.
This is just some fill text. This is just some fill text. This is just some fill
text.
This is just some fill text. This is just some fill text. This is just some fill
text.
This is just some fill text. This is just some fill text. This is just some fill
text.
</div>
</center>

</body>
</html>

Reproducible: Always

Steps to Reproduce:
1. Create a DIV
2. Add both padding-left / padding-right
   Note: Have not tested with onlo one of them active.
3. Add overflow:hidden or overflow:auto
4. It is the combination of padding-right / padding-left and overflow:hidden /
overflow auto that triggers this bug.

Actual Results:  
Extra space "padding" are added at bottom of DIV

Expected Results:  
No extra "padding" or space should have been added to bottom of DIV
Note:

Have found that same bug applies for the SPAN tag as well. 
I would guess some other tags would have the same problem as well, but I do not
have the time to test them all.

Hope you mozilla guys can fix this in the next release.

Keep up the good work

Tore B. Krudtaa
Summary: Extra "padding" are added to bottom of DIV if you combine padding-left / padding-right with overflow:hidden / overflow:auto. If you remove one of them padding or overflow... then problem is gone. → Extra "padding" are added to bottom of DIV if you combine padding-left / padding-right with overflow:hidden / overflow:auto. If you remove one of them padding or overflow... then problem is gone.
I can see the bug in Mozilla1.7, but not in the latest nightly trunk build.
Reporter, could you please test with the nightly trunk build?
http://ftp.scarlet.be/pub/mozilla.org/firefox/nightly/latest-trunk/
WFM: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b4) Gecko/20050818
Firefox/1.0+

Could reproduce with Firefox 1.0.x, so this has most probably been fixed. Please
test with trunk bulds when it comes to layout issues. Firefox 1.0.x is based on
the rendering engine gecko 1.7 that is over one year old by now. Thanks
Status: UNCONFIRMED → RESOLVED
Closed: 19 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.