29625 - CSS borders display outside box on Fixed position elements

Status: VERIFIED INVALID

(Core :: Layout, defect, P3)

Description

[Andrew Thompson]

The test case I will attach to this bug will form the clearest explanation, however:

The CSS spec states that the width of a Box is the sum of the widths of the
content, padding and margins, and is determined absolutely by the width property.

In the attached test case we see that setting a border on a DIV element that was
been given a fixed position and width, results in some odd behaviour.
The example has 2 DIV elements that are fixed positioned and styled almost
identically.

Firstly, the borders appear to be drawn outside of the element box!

We see this in two ways.
i) the bottom border on the top box is not visible. Since the border is
*supposed* to be inside the box, this should not be possible as the boxes do not
overlap. Hence the border must be outside the box;
ii) we see the box with the border is *wider* than the one without, despite the
fact that their widths are set to the same value in the style sheet

Furthermore, the two boxes are not properly aligned. The two boxes should line
up with the first having a border inside it. Instead the boxes appear left
aligned with the first being wider than the second by double the width of the
border.

This is a little screwy to say the least! I have a page that I was working on
where adding borders clearly results in those borders being drawn outside of
their element boxes, even more clearly than this example shows.

This is M13 on the Macintosh, but I doubt its platform specific, judging by the
behaviour.

Comment 1

[Andrew Thompson]

Attachment: Testcase showing problem with borders on fixed pos. elements

Comment 2

[Andrew Thompson]

OK Sorry  - please ignore the first attachment.
M13 couldn't upload it, so I tried IE, which made a royal mess of the whole
thing. Repeating with NAV 4.

Comment 3

[Andrew Thompson]

Attachment: This version of the above should work

Comment 4

[Andrew Thompson]

Attachment: Third time lucky. Abject apologies to all concerned!

Comment 5

[Pierre Saslawsky]

Thanks for your perseverance: the bug can be reproduced with the last testcase.
Same result on Mac & Windows, as expected...

Comment 6

[Andrew Thompson]

Out of interest, the new Tasman rendering engine in IE5 on the Mac can't handle this either.

It leaves a gap between the top and bottom box, which is wrong, given the specified percentage heights 

and margins total 100%

Comment 7

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

As far as I can tell, the test page is laid out correctly.  I am marking the bug
INVALID.  The second paragraph above in the bug is wrong:  the 'width' property
describes the content width of a block, and the padding, border, and margin go
outside the width.  You're creating overconstrained box properties by setting
width, top, and bottom, and leaving the margins at 0 (same for the horizontal
ones), so the value for bottom (or right) is ignored (see CSS2 10.3.7 or
10.6.4).

Comment 8

[Andrew Thompson]

I agree. I'd failed to apprechiate the difference between width and max-width.

Lesson in CSS much apprechiated :-) Sorry for wasting your time.

Comment 9

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

'max-width' works the same way 'width' does.  It just puts constraints on
'width' so that one could combine units, e.g.:

width: 12em;
max-width: 50%;

makes an element 12em wide, but never more than half the width of the parent. 
The proposed CSS3 property 'box-sizing' allows one to suggest the alternative
sizing model.

Comment 10

[Christine Hoffman]

Adding 'verifyme' keyword

Comment 11

[Hixie (not reading bugmail)]

Netscape's standard compliance QA team reorganised itself once again, so taking 
remaining non-tables style bugs. Sorry about the spam. I tried to get this done 
directly at the database level, but apparently that is "not easy because of the 
shadow db", "plus it screws up the audit trail", so no can do...

Comment 12

[Hixie (not reading bugmail)]

VERIFIED