Re: Issue 3: Backgrounds for Block vs. Inline Elements


I ran into this as well when I was working on Control Freak...

When you define the background-color for a positioned element, you see a
solid colored block in IE4(p1 & 2).
However, in NN4, the color only shows up when there's text present.  Also,
NN4 leaves a one or two pixel transparent area in the leading space between

I'm not an expert on the specification, but NN4's implementation seems
screwed up if for no other reason than "it just don't look right"

Control Freak CSS

-----Original Message-----
From: E. Stephen Mack <estephen@emf.net>
To: www-style@w3.org <www-style@w3.org>
Date: Wednesday, July 30, 1997 5:01 AM
Subject: 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
>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
>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
>.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/