Closed
Bug 254494
Opened 21 years ago
Closed 21 years ago
Width of HTML element is not calculated correctly
Categories
(Firefox :: General, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: libor, Assigned: bugzilla)
References
()
Details
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040113
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040113
I tried to make smallest broken example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
.menuTabsPage {
padding: 1em;
border: 1px solid black;
width: 100%;
}
</style>
</head>
<body bgcolor="#BBBBBB">
<table width="750" bgcolor="#FFFFFF">
<tr>
<td>
<table width="100%">
<tr>
<td>
<div class="menuTabsPage">Bla</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Border of div element goes outside the table
Reproducible: Always
Steps to Reproduce:
1. View http://s88176062.onlinehome.us/test.html in Gecko/20040803 Firefox/0.9.3
Actual Results:
Black border goes on right side out of white box
Expected Results:
Black border is all inside white box
As it is in Mozilla 1.6, Gecko/20040113 or any other browser (IE, Opera)
|
||
Comment 1•21 years ago
|
||
It's supposed to do that.
The space taken up by an element is width + padding + border + margin.
Status: UNCONFIRMED → RESOLVED
Closed: 21 years ago
Resolution: --- → INVALID
|
|
Reporter | |
Comment 2•21 years ago
|
||
Well see http://www.w3c.org/TR/CSS1#formatting-model
(1)
"The horizontal position and size of a non-floating, block-level element is
determined by seven properties: 'margin-left', 'border-left', 'padding-left',
'width', 'padding-right', 'border-right' and 'margin-right'. The sum of these
seven is always equal to the 'width' of the parent element."
I believe width of the parent of div should be at most 750px so the black border
should be <= 750px wide.
But there is also
(2)
http://www.w3c.org/TR/CSS1#width
"Percentage values: refer to parent element's width"
So I have conflict in my code the div width 100% takes all the space of parent -
nothing left for padding. Actually setting any positive value for margin, border
or padding will break rule (1). This is very UNFRIENDLY behavior ;-) IMHO
relative values (%) should be treated less important then absolute values; also
common sense is keep child element inside parent rule (1) feels stronger rule (2)
I also agree I should not write conflicting code.
You need to log in
before you can comment on or make changes to this bug.
Description
•