17331 - Borders Shown on Empty <DIV>

Status: VERIFIED INVALID

(Core :: Layout, defect, P3)

Description

[unapersson]

When an empty DIV is given a border through CSS the border is displayed even
though the DIV has no content. It is not shown in IE4 / Opera.

See attached test case for simple example.

Note: Netscape 4 also shows a border, but only shows a small square.

Comment 1

[unapersson]

Attachment: An illustration of the problem, an empty div given a 1px border

Comment 2

[unapersson]

*** Bug 17330 has been marked as a duplicate of this bug. ***

Comment 3

[troy]

The DIV's frame is ending up with a height of 30 twips

Comment 4

[kipp]

According to the css2 spec, empty elements affect layout. THis includes their
border, padding, margins, etc.

I'm sure dbaron can quote chapter and verse :-)

Comment 5

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

There's nothing to quote because there's no exception.  The only time empty
elements can just disappear is when they have no padding and no border and no
height, so margins can collapse through them...

The HTML spec says some stuff about how P elements should disappear, though, but
nothing about DIVs.

However, I'm surprised it doesn't show up in IE and Opera...

Comment 6

[Hixie (not reading bugmail)]

Yup, this is not a bug, we are acting completely correctly.

The Opera bug is mentioned on the Web Standards Project review (last sentence
before the "Example A" header):
   http://www.webstandards.org/css/opera/borderdemo4.html

IE5 is also buggy in this respect. (And it has some really weird behaviour with
this, too, which I just discovered. For example, take the test case above and
give the divs a height of, say, 10px. The top margin will be set to zero!)
I am not aware that this is mentioned anywhere, but then IE has so many bugs
more important than this that it has probably just been overlooked.

Comment 7

[unapersson]

I'm not sure as to the behaviour on IE5, as I don't have access to that, but
the usage in IE4 seems quite sensible, i.e.

if (height=0) {
  don't display border
}
else if (height>0) {
  display border
}

I'm hard pressed to think of a situation where putting a border on a div with
no content and a height of zero is useful in an authoring context. Whereas it
makes sense if the div does have its height defined (a fixed box that can
dynamically be filled with content for instance).

Seeing as Mozilla's behaviour does match the spec I won't quibble with it
though. It just seems as though the spec isn't particularly useful in this
regard.

Comment 8

[kipp]

And that wouldn't be the first time that something in the css2 spec wasn't
completely thought through. I happen to agree with you, but we are trying oh so
hard to meet the letter of the spec (with only a little bit of intent leaking
through where the spec is too vauge).