Closed Bug 272826 Opened 20 years ago Closed 20 years ago

Padding on div tag breaks text rendering

Categories

(Firefox :: General, defect)

x86
Windows 2000
defect
Not set
normal

Tracking

()

RESOLVED INVALID

People

(Reporter: bviksoe, Assigned: bugzilla)

References

()

Details

User-Agent:       Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-GB; rv:1.7.5) Gecko/20041110 Firefox/1.0

A DIV tag with a padding style breaks rendering of the text inside it.

The DIV tag seems to respect the 'padding' style settings, however the text 
embedded in it "breaks" out of the tag boundries and is painted outside the DIV 
rectangle.


Reproducible: Always
Steps to Reproduce:
1. Open the page: http://www.viksoe.dk/code/rsssync.htm
2. Scroll down to the Q&A section. Notice how the text is painted outside
the div-tag (grey area). 

Actual Results:  
Text is painted outside the tag rectangle.

Expected Results:  
Obviously the text should never paint outside the tag boundries.



The following snippet also demonstrates that something is wrong with the div-
tag with padding enabled. Notice how scrollbars are needed when word-wrapping 
the text because the page width somehow gets more than 100%.

<html>
<head>
<title>Browser bug</title>
<style>
<body>
<div style="BACKGROUND-COLOR: #eeeeee; WIDTH: 100%; PADDING: 10px">
Test Test Test 
Test Test Test 
Test Test Test 
Test Test Test 
Test Test Test 
Test Test Test 
Test Test Test 
Test Test Test 
Test Test Test 
Test Test Test 
</div>
</body>
</html>
The second issue is correct rendering.  Padding is added to the overall width
taken up by the element, so it becomes 100% + 10px + 10px wide.

This also explains the first issue.  The width is set to 100% plus padding, so
there is room for the text to overflow out of the bgcolor.
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.