W3C home > Mailing lists > Public > www-style@w3.org > May 2000

Inline elements with box model properties spanning block-level elements

From: Matthew Brealey <webmaster@richinstyle.com>
Date: Wed, 03 May 2000 14:33:50 -0700
Message-ID: <39109B37.726B@richinstyle.com>
To: www-style@w3.org
Can someone tell me what the correct rendering when inline-level
elements span block-level ones? I've written a test that tests this
(http://richinstyle.com/test/box/inlineboxblock.html), but I don't think
the spec specifies the correct result. There are two main issues:

1. Should borders on inline elements outside the block affect elements
inside it? For example, test 2 on that page is:

<div style="display: inline; border: solid red 2px">
<div>
This DIV is spanned by a display: inline DIV with a red border.  Whether
the border should have any effect is uncertain.
</div>
</div>

Should the effect be any different from the comparison element:
<div style="line-height: 1.6">
<span style="border: solid black 1px">
A multiline SPAN with border
A multiline SPAN with border
A multiline SPAN with border
A multiline SPAN with border
A multiline SPAN with border
A multiline SPAN with border
A multiline SPAN with border
A multiline SPAN with border
A multiline SPAN with border
A multiline SPAN with border
A multiline SPAN with border
</span>
</div>
, where, uncontroversially, there is a border around the elements. The
argument for not applying the border in the former case but applying it
in the latter is that the element has been broken up by the block, with
its own margins, borders and so on, but I don't think that applies since
borders are applied around em squares anyway, and do not, generally
touch anyway.

2. Given that current browsers do not affect the elements inside, should
the border be closed in the following case (test 4 on that page):

<div style="display: inline; border: solid red 2px">
hello
<div>
This DIV is spanned by a display: inline DIV with a red border. 
</div>
hello
</div>

I.e., should the rendering be

+------
|hello
+------
This DIV is ...
-----+
hello|
-----+

(the rendering in Opera 4 (the whitespace bug is not at issue))

or:

+-----+
|hello|
+-----+
This DIV is ...
+-----+
|hello|
+-----+

(the rendering in Netscape 6)?

The argument in favour of the latter rendering is that if the border is
not continuing into the block-level element, it must be closed, but
OTOH, the element is still open, and the rule for inline elements is
that the border is only open at the beginning and only closed at the
end.

-----------------------------------
Please visit http://RichInStyle.com. Featuring:
MySite: customizable styles.         AlwaysWork style 
Browser bug table covering all CSS2 with links to descriptions.
Lists of > 1000 browser bugs         Websafe Colorizer 
CSS2, CSS1 and HTML4 tutorials.      CSS masterclass 
CSS2 test suite: 5000++ tests and 300+ test pages.
Received on Wednesday, 3 May 2000 09:29:08 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:04 GMT