113849 - Why place the border centered by the width

Status: RESOLVED DUPLICATE of bug 96463

(Core :: DOM: CSS Object Model, defect)

Description

[Preben Holm]

Hey. I wonder why you guys have made a major bug in the browser! The problem is
that fx. DIV's borders are aligned to the center edge so the total width/height
of the borders is ("the width" + ("the border in both sides")/2).

If I read this file from the W3.org site
(http://www.w3.org/TR/REC-CSS2/box.html) I really get the idea that the border
should be placed outside.. I don't know if this is correct, or not. 
I've asked this question to a HTML-guru and he didn't knew and said that the
standard didn't really say anything useful about it. The standard somewhere said
that it should be inside the width of the element and sometimes outside the
elements width. He had not read the developer docs but "only" the documentation...
It's really anoying working with coordinates and placing elements close to each
other, if there's a border... 
Microsoft has chosen to put the border inside the applied width - but what's the
correct thing to do...

It's no problem working with tables, Iexplore and mozilla are working the same
way here - I think it's put outside the applied with when working with tables.

Comment 1

[eberry]

Please provide a simplified testcase (URL or file attachment) or a screenshot
showing the problem.

Comment 2

[Boris Zbarsky [:bzbarsky]]

The css "width" property does not and should not include borders.  Is that what
this bug is about?

Comment 3

[Preben Holm]

Hey That's the exact problem. Working with DIV's the border is placed outside
the width so that the total width is "the width" + "the borders widths", but
working with tables the total width is the width of the table. It does not
matter whether the border is 20px, the inside width just decreases...

Comment 4

[Boris Zbarsky [:bzbarsky]]

In standards mode we should not be doing that (if your page is in standards
mode, this is a duplicate).

In quirks mode this is done on purpose.

Attaching a testcase using
http://bugzilla.mozilla.org/attachment.cgi?bugid=113849&action=enter would be
the best course of action here....

Comment 5

[Preben Holm]

Attachment: Test of borders and tables

This attachment shows problems with borders in TD's.
The border of a TD is placed outside the TD-width and padding.
But the problem is, that the first TD has a width=389 and a padding=5, the next
TD has a width=25, a padding=0 and a border-left=1px. This means that from the
beginning of the first cell to the ending of the next cell there should be
389+2*5+25=424px but the area is only 423px.
This means that the border is placed 1px to the left of where it was suposed to
be. It's really not possible making web sites look nice in all the browsers
when such errors occur.
The html file is just an example of a bigger web site I was making.
IE6 actually (probably first time ever) shows this example correct.

Comment 6

[Preben Holm]

quirks and standard mode?
What's the difference, and how can I change the mode?

My attachment shows a problem using borders on tables and TD's

Comment 7

[Boris Zbarsky [:bzbarsky]]

Standards mode is the mode you get by having an XHTML, HTML 4.0 or 4.01 Strict,
or HTML 4.01 Transitional with DTD uri doctype.

quirks mode is the mode you get by having no doctype or a doctype for an old
version of HTML.

most pages out there are in quirks mode and would render terribly in standards
mode, which actually follows spec.

Our current behavior is desired behavior in quirks mode.  As for standards mode,
that's currently being debated.

Duplicate of "border widths are subtracted from table's intrinsic width."

That bug contains a discussion of why we do what we do as well as the exact css
properties to set to override this table layout behavior.

The developers that bug is assigned to tested IE6 and as far as they can tell it
renders tables identically in quirks and standards mode just like mozilla does. 
If you have a testcase on which Mozilla and IE6 differ in standards mode, please
attach it to bug 96463.

*** This bug has been marked as a duplicate of 96463 ***

Comment 8

[Preben Holm]

Well, I have defined my doctype and there is a difference between IE6 and
Mozilla. Look at my attachment one more time and maybe take a screenshot to see
the difference.
It really renders differently and wrong, you see it if you look through the
source of my attachment. I don't know why, but it's one pixel wrong.. Look
closely and analyse - please...

It maybe is a dublicate, but my example shows the exact error with a TD right
border...

Comment 9

[Boris Zbarsky [:bzbarsky]]

How are you doing these to-the-pixel measurements on screen?

And I don't have IE6.  I _may_ have IE5/Solaris.  But don't bet on that
rendering the same way as IE5/Windows....

So if you could post screenshots of that testcase in both Mozilla and IE with
the difference clearly labeled, that would be great.

Comment 10

[Preben Holm]

I have just made a screenshot and then pasted it into photoshop in which I could
mark the area between the borders?

I'll post an attachment...

Comment 11

[Preben Holm]

Attachment: screenshot (error)