274289 - Borders and padding render outside the bounding tag, or cause misalignment of content.

Status: VERIFIED INVALID

(Firefox :: Tabbed Browser, defect)

Description

[Andrew]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

Hi.

Firstly, using "border" styles causes the borders to be rendered *outside" the
bounding DIV or TD tags, not *inside*, as should be the case.   This causes
bordered content to be shifted and misaligned.  The behaviour of border styles
should be changed so that they render *inside* the bounds of the surrounding tag.

Please see the site www.kerbjournal.com - the active menu item uses a black
"border-left" style, which as you will see causes content of that menu item to
be shifted to the right.  You will notice as you mouse-over the menu.

Secondly, the "padding" style does the same thing.  Padding should not cause
content to be moved beyond the bounds of the containing tag, but create a space
between the tag's content and its boundary.

These are the two major rendering errors which cause Firefox to render pages
differently to other browsers.

Thanks for your time!


Reproducible: Always
Steps to Reproduce:
Please refer to the URL provided to see the HTML and styles used.  The problem
is fairly simple.
Actual Results:  
Content with a border is shifted by the number of pixels of the border, because
the borders are rendered *outside* a tag's bounds.

Expected Results:  
Borders should be rendered *inside* a tag's bounds, not causing the tag's size
to be changed.  It affects TD tags, therefore cells in a table cause content
misalignments.

Comment 1

[Bill Mason]

(In reply to comment #0)
> Firstly, using "border" styles causes the borders to be rendered *outside" the
> bounding DIV or TD tags, not *inside*, as should be the case.

No, go read the CSS spec.  Our rendering is correct; your expectation is not.