371502 - CSS style sheet border-left -right -top -bottom displaces object

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[Delete]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

To center an object with a border around is not possible.
A border-left of 10px for example moves the object over this 10px to the right side.


Reproducible: Always

Steps to Reproduce:
see link with a simple example


Expected Results:  
I'm expecting that the object not moves an the border-left 10px draws the border to the left side.

MS IE is doing well in this case. Make a test.

Comment 1

[:Mook]

This is an Internet Explorer bug (!), fixed in IE6 and later for standards-compliant mode only.  IE retains the old behaviour in quirks mode.

References:
http://www.quirksmode.org/css/box.html
http://en.wikipedia.org/wiki/Internet_Explorer_Box_Model
http://www.w3.org/TR/CSS21/box.html

If you really want it that way, use the proposed CSS3 box-sizing declaration.  As Mozilla has not properly implemented it yet, use -moz-box-sizing instead.  (See quirksmode page above)