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




13 years ago
13 years ago


(Reporter: Libor Valenta, Assigned: Blake Ross)


Firefox Tracking Flags

(Not tracked)





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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.menuTabsPage {
  padding: 1em;
  border: 1px solid black;
  width: 100%;
<body bgcolor="#BBBBBB">
 <table width="750" bgcolor="#FFFFFF">
    <table width="100%">
       <div class="menuTabsPage">Bla</div>

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.
Last Resolved: 13 years ago
Resolution: --- → INVALID

Comment 2

13 years ago
Well see http://www.w3c.org/TR/CSS1#formatting-model

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