Issue 3: Backgrounds for Block vs. Inline Elements

Time for my third Style Sheet implementation issue: Backgrounds
for block-level and inline elements.

Suppose we have a style sheet with the following class:
.highlighter { background: yellow; }

Then suppose we have an HTML document with the following elements:
---------
<HR CLASS="highlighter">

<P CLASS="highlighter">CSS1 is a W3C specification.</P>

<P>Popular browsers are made by
<STRONG CLASS="highlighter">Netscape</STRONG> and
<STRONG CLASS="highlighter">Microsoft</STRONG> as
well as the Lynx developer community.</P>

<P><EM CLASS="highlighter">Newflash!</EM></P>

<BLOCKQUOTE CLASS="highlighter">
In any case it looks like prudent authors will have to declare style for
all elements they use. --David Perrell
</BLOCKQUOTE>
---------

Now, the first and simplest issue is how wide this yellow background
color should be.  For Windows 95, Navigator 4.01 and IE 3.02
interpret the background color to only surround the actual text,
not the entire line.  IE 4.0 pp2 highlights the entire line
for the P and BLOCKQUOTE block elements.  IE 3.02 also shades
the background of the HR, but neither Navigator 4.01 or IE 4.0 pp2
change the appearance of the HR at all.

In considering whether the entire line of a paragraph should
be highlighted or just the actual text of the paragraph, I
looked at the following areas of the CSS1 specification for
relevant judgements:

* 5.3.2   background-color property [1]
* 5.3.7   background property [2]
* 5.5.2   margin-right property (initial value of 0) [3]
* 5.5.4   margin-left property (initial value of 0) [4]
* 5.5     Box properties [5]
* 5.5.25  float property (initial value of none) [6]
* 5.6.1   display property (initial value of block) [7]
* 4       Formatting model (margins are always transparent) [8]
* 4.1     Block-level elements [9]
* 4.12    Horizontal Formatting [10]

Given in [8] that margins are always transparent, and that the
initial values of the left and right margins are 0 [3] and [4],
and that the width of a paragraph must be "auto" -- but that
margin-left + paragraph width + margin-right must equal the
parent element's width [10], the best that I can determine
seems to be that the block-level elements should have a
full screen width background.

Which means to me that IE 3.02 and Navigator 4.01 have it wrong
and IE 4.0 pp 2 has it right.

This also fits with a test document on the CSS test pages 
and the description of the behavior of UL and LI backgrounds
[11].

There are other wrinkles here, and depending on if I'm right
with this first step, then I will follow up with documentation
of some very strange behaviors if I use the following style
sheets:

.warning { background: yellow; border: solid red;}
.blockwarning { background: yellow; border: solid red; display: block; }
.pullquote { background: yellow; border: solid red; text-align: center; }

I'll save the descriptions of the resulting train wrecks for later, though.

[1] http://www.w3.org/pub/WWW/TR/REC-CSS1#background-color
[2] http://www.w3.org/pub/WWW/TR/REC-CSS1#background
[3] http://www.w3.org/pub/WWW/TR/REC-CSS1#margin-right
[4] http://www.w3.org/pub/WWW/TR/REC-CSS1#margin-left
[5] http://www.w3.org/pub/WWW/TR/REC-CSS1#box-properties
[6] http://www.w3.org/pub/WWW/TR/REC-CSS1#float
[7] http://www.w3.org/pub/WWW/TR/REC-CSS1#display
[8] http://www.w3.org/pub/WWW/TR/REC-CSS1#formatting-model
[9] http://www.w3.org/pub/WWW/TR/REC-CSS1#block-level-elements
[10] http://www.w3.org/pub/WWW/TR/REC-CSS1#horizontal-formatting
[11] http://www.w3.org/CSS/Style/Test/
-- 
E. Stephen Mack <estephen@emf.net>    http://www.emf.net/~estephen/

Received on Wednesday, 30 July 1997 05:57:18 UTC