If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

Width of HTML element is not calculated correctly

RESOLVED INVALID

Status

()

Firefox
General
RESOLVED INVALID
13 years ago
13 years ago

People

(Reporter: Libor Valenta, Assigned: Blake Ross)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

13 years ago
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

13 years ago
It's supposed to do that.

The space taken up by an element is width + padding + border + margin.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 13 years ago
Resolution: --- → INVALID
(Reporter)

Comment 2

13 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.