248034 - Not correctly handing CSS defined dimensions for DIV tags.

Status: VERIFIED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Ben Koehler]

User-Agent:       Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040614 Firefox/0.9

When rendering defined DIV tag dimensions in an external CSS file, the browser 
appears to add an additional 8px to the specified dimensions (in both width and 
height).

Reproducible: Always
Steps to Reproduce:
1. Create an HTML document using an external CSS reference file to specify 
dimensions for DIV tags in the HTML document.
2. View page in Mozilla Browser.

Actual Results:  
Page rendered has DIV tag dimensions that are 8px greater in height and width 
than specified in the code.

Expected Results:  
The rendered page should follow the specified dimensions in the CSS code.

When using an image as a background for the the DIV tag, you can see that the 
DIV tag is the incorrect size, because the image repeats (Image dimensions are 
the same as the specified DIV tag dimensions).

Comment 1

[Ben Koehler]

Attachment: HTML, CSS and JPG file that creates a Test Case for this bug.

HTML Test Case

Comment 2

[Bill Mason]

From the original URL:

div.menuHeadlineAlpha {
background-image: url("./images/header.jpg");
width: 145px;
height: 20px;
border-bottom: 1px #777777 solid;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
font-weight: bold;
padding: 4px;
}

Padding is in addition to the width, so your DIV is using 145+8+8 pixels of
space.  Mozilla's rendering is correct.

See http://tantek.com/CSS/Examples/boxmodelhack.html for details of this and how
to work around it in browsers that do it wrong (i.e. multiple IE versions).

Comment 3

[Bill Mason]

(145+4+4 pixels, that is.)

Comment 4

[Ben Koehler]

Using a recent version of Firefox (I believe I'm using 0.9), go to the page 
that you linked me to. There is a blatant misrendering of the code on that very 
page. I would also suggest that you cross check the page in a recent version of 
Internet Explorer, which "misinterpret the CSS1 box model" and see that there 
is no misrendering.

The link for your surfing pleasure is:
http://tantek.com/CSS/Examples/boxmodelhack.html

I think this is cause for looking into this CSS rendering issue.

Comment 5

[Ben Koehler]

The misrendering that I am refering to, is near the bottom. Two links that 
extend past the bounds of the defined layout area.

--- BEGIN Snippet ---
medium are used, and this has been reported to the W3C: 

http://lists.w3.org/Archives/Public/www-validator-css/2001Jul/0086.html 
http://lists.w3.org/Archives/Public/www-validator-css/2001Oct/0070.html 

My advice: validate your style sheet as a media independent file,
--- END Snippet ---

Comment 6

[Ben Koehler]

Attachment: Comparison Screenshot for the Described Misrendering on Website: http://tantek.com/CSS/Examples/boxmodelhack.html

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

How is attachment 151415 [details] related to comment 0?

(There's a bug somewhere about breaking on hyphens, but that's not what comment
0 says this bug is about.)

Comment 8

[Ben Koehler]

The relation of Attachment 151415 [details] was simply to show that maybe the rendering 
engine that was said to work correctly, might not actually be working correctly.

Although, after further research into this matter, I read a bit throught the 
CSS1 Standard on the W3C Website (http://www.w3.org/TR/CSS1#formatting-model):

"The left outer edge is the edge of an element with its padding, border and 
margin taken into account. The left inner edge is the edge of the content only, 
inside any padding, border or margin. Ditto for right. The top is the top of 
the element including any padding, border and margin; it is only defined for 
inline and floating elements, not for non-floating block-level elements. The 
inner top is the top of the content, inside any padding, border or margin. The 
bottom is the bottom of the element, outside any padding, border and margin; it 
is only defined for inline and floating elements, not for non-floating block-
level elements. The inner bottom is the bottom of the element, inside any 
padding, border and margin.

The width of an element is the width of the content, i.e., the distance between 
left inner edge and right inner edge. The height is the height of the content, 
i.e., the distance from inner top to inner bottom."

This proves your point in saying that Mozilla does render the CSS correctly, 
although would like to note that it is quite strange that this has been 
overlooked by everyone else. It definately makes for an interesting problem 
when it comes to developing websites for all browsers.

Thank you for your time, I hope to be able to lend my assistance to further 
bugs on this project.