for practical use of CSS

this document is located at...
<URI:http://css.nu/examples/workarounds.html>

Extending Color Width (Netscape)

A major source of frustration for CSS authors are implementation differences in popular browsers. One such difference is the application of background color to elements. Internet Explorer 4x renders the color across the width of the screen, whilst Netscape Navigator 4x limits the width to the actual width of the text. Through the luck of the 'draw' ;-), it was discovered that adding the ruleset border: 1px; to a declaration changed the NN rendering to be similar to the IE rendering. An additional suggestion in the newsgroup, ciwas, led to the adoption of: border: none; to declarations. Using a Netscape 4x browser, you may observe the rendering differences below. Note that the Header required the addition of a margin.

The differences in rendering on <P> are shown below:

I am a paragraph with the 'special class', so the background color will only extend as far as the text itself, and will not color the entire 'box.

I'm styled with the class 'exspecial', and, since I'm now extra special, the color will extend to cover the entire 'box' which contains me :-)

I am a header

Now, with the ruleset below:

.exspecial2 {background: #cc3333; color: black; border: none; font-size: 1.92em;
font-weight: bold; margin: 0px;}

Also note that some margin (even margin: 0px;) needs to be set for the headers to render.