Note: There are a few cases of duplicates in user autocompletion which are being worked on.

Using overflow:hidden causes right padding doubling on elements inside a table

RESOLVED WORKSFORME

Status

()

Core
Layout: Block and Inline
RESOLVED WORKSFORME
14 years ago
12 years ago

People

(Reporter: Kenneth Kolano, Unassigned)

Tracking

({testcase})

Trunk
x86
All
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments)

(Reporter)

Description

14 years ago
User-Agent:       
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7a) 

Applying the style overflow:hidden to an element inside a table cell causes 
the right padding of that element to be doubled in width.

Sample HTML...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 
1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Overflow Doubles Padding</title>
	</head>
	<body>
		<table><tr>
			<td>
				<div 
style="overflow:hidden;padding:15px;width:190px;border:5px solid #F00">
					<div style="border:5px solid 
#f00">Test</div>
				</div>
			</td>
		</tr></table>
		<div 
style="overflow:hidden;padding:15px;width:190px;border:5px solid #F00">
			<div style="border:5px solid #f00">Test</div>
		</div>
	</body>
</html>

Reproducible: Always
Steps to Reproduce:
1. View sample HTML in Mozilla based browser
Actual Results:  
The <div> inside of the table has a doubled right padding, the one outside one 
does not.

Expected Results:  
Both <div>'s should look the same with 15px padding all the way around.

This is my first bug submission, I hope I didn't forget anything.
Where's the rest of your build identifier?  I don't see a build date.
(Reporter)

Comment 2

14 years ago
(In reply to comment #1)
> Where's the rest of your build identifier?  I don't see a build date.

Oops, missed the second line of it. The full version id is...

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7a) Gecko/20040131 
Firebird/0.8.0+
Created attachment 140617 [details]
reporter's testcase
Assignee: dbaron → nobody
Status: UNCONFIRMED → NEW
Component: Style System (CSS) → Layout: Block and Inline
Ever confirmed: true
QA Contact: ian → core.layout.block-and-inline
Created attachment 140638 [details]
Testcase for Mozilla <= 1.5  (using overflow:-moz-scrollbars-none)
Causing a reflow by zooming cures the problem.
Bug does not occur in Mozilla 1.0.2
Bug occurs in Mozilla 1.2.1 and forward.
Keywords: testcase
OS: Windows XP → All

Comment 6

14 years ago
reducing the window size makes the second div without a table in attachment
140617 [details]  to go to the size of the div in the table.

Comment 7

13 years ago
(In reply to comment #5)
> Causing a reflow by zooming cures the problem.
> Bug does not occur in Mozilla 1.0.2
> Bug occurs in Mozilla 1.2.1 and forward.

This bug is still present in Mozilla 1.6 : Mozilla/5.0 (X11; U; Linux i686;
fr-FR; rv:1.6) Gecko/20040413 Debian/1.6-5.
It also occurs in some places with a div within another div, zooming corrects
the problem.
Take a look at http://www.bulix.org for an example.

Updated

13 years ago
Blocks: 284242

Comment 8

13 years ago
In "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050223
Firefox/1.0.1" this code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
/>
	<title>padding-right proglem in Firefox</title>
	<style type="text/css">
p {
	float: left;
	width: 300px;
	background-color: blue;
	overflow: hidden;
	padding-right: 50px;
}
	</style>
</head>

<body>
	<p>Ut eros. Praesent porttitor euismod massa. Donec commodo ornare justo.
Phasellus pulvinar dolor in turpis. Nunc pede. Proin sollicitudin. Donec
tincidunt quam.</p>
	<img src="images/highlight1.jpg" alt="" />
</body>
</html>

have the same rendering error.
floating left or right adds 50px to the right margin.
padding-left instead of right adds 50px to the left AND right!
adding a fixed height removes the problem
the bg-color has no inpact.
I can see the bug in Mozilla1.7, but not anymore in current trunk build, marking
WFM. Please reopen, if you still can see the bug in current trunk build.
Status: NEW → RESOLVED
Last Resolved: 12 years ago
Resolution: --- → WORKSFORME

Comment 10

12 years ago
Created attachment 198058 [details]
problem reappears when buttons are pressed

Comment 11

12 years ago
For the most recently added attachmment (198058)...

User-Agent:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.12) Gecko/20050915
Firefox/1.0.7

This bug reappears for me when there's need to reflow the some of the
child-node's content, cases triggering the bug are things like clicking a form
button, or resizing text in a hyperlink on hover. 

I'd reopen this, but it it appears that I don't have permission to, or am
misunderstanding something. Sorry.
Brian, you're using 1.0.7, that's why you're still seeing the bug.
This bug is fixed in the 1.5beta release and in current trunk builds:
http://ftp.scarlet.be/pub/mozilla.org/firefox/nightly/latest-trunk/
You need to log in before you can comment on or make changes to this bug.