Bug in Backgrounds for DIV Elements

[This page resided for many years at http://danielgreene.com/cssbug.html]

Results are shown when using the following embedded CSS declarations [now done with inline CSS because this blog doesn't allow embedded CSS.]:

code { font-family: Fixedsys, "Lucida Console",
"Courier New", monospace; }
.p { background: #CFC; /*lightest green*/
     color: black; }
.v { background: #CFF; /*lightest blue*/
     color: black; }
.d { background: #FCF; /*lightest purple*/
     color: black; }
.samp { background: #FCF; /*lightest purple*/
     color: black;
     margin: 1em 3em;
     border: thin solid black;
     padding: 5mm; }
.test { background: #CCC; /*lightest gray*/
     padding: 1em; }

Here’s how it looks in your browser:

This is what it looked like in my browser (MSIE 4.72.2106.8 for Win95):

Notice how the background colors of the SPAN elements in the top left corner paint all the way to the top border of the DIV, and how the bottom border of the P element abuts the bottom border of the DIV?

Here are a couple of screen shots someone sent me, showing how it rendered on his browsers:

Now, MSIE 4.0a Mac version seems to have gotten the SPAN background coloring right (the colors stay within the line of text, as they should, rather than painting up to the top edge of the DIV), but the bottom edge of the P (The quick brown fox…) still abuts the bottom edge of the DIV, which is wrong. NN4.04.1 Mac seems to have done the best job; the span colors are painted correctly, and the P does not seem to abut the bottom edge of the DIV, but respects the 1em padding that’s supposed to be there.

I hope you found this illustration helpful. Thanks to Sue Simms for encouraging me to complete this little demo, and for linking to it.