Re: Styling anonymous container and child boxes

L. David Baron wrote:
> 2) Backgrounds and borders on headers that do not span the width of
>    the page (this would deal with a common reason people want
>    shrink-wrap on blocks [3]):
> 
>    h1:inside {
>      display: inline;
>      background: yellow;
>      color: black;
>      border: 3px solid green;
>      }

This can be dealt with using display: inline-block; the effect would be
exactly the same, except the H1 would be the inline block, and the
'outside' anonymous containing block box would be the spanning block
element.

> 3) Describing the formatting of form buttons:
> 
>    input[type=button] {
>      display: inline-block;
>      border: 3px outset #ccc;
>      background: #ccc;
>      color: black;
>      }
> 
>    input[type=button]:focus:inside {
>      display: inline;
>      outline: 1px dashed black;
>      }

This does seem to be quite a major problem (all the others are 'This
would be nice', whereas this is a 'We need this to describe HTML'). The
outline of an inline block at present goes around the box; the way to
solve this without requiring this pseudo-element would be to say that
outlines on inline blocks go around the content of the inline block; for
example, they go around the text. However, this wouldn't allow outlines
around the block itself.

[Other issues snipped, with which I would concur, incidentally]

----------------------------------------
Please visit http://www.richinstyle.com
Featuring:  CSS bug guides (more than 1000 CSS bugs) CSS Masterclass
HTML 4 guide    CSS 1 guide    CSS 2 guide   Web-safe colorizer 
CSS bug table     More than 300 CSS test pages