coloring text backgrounds

how NN and IE handle coloring text backgrounds

page 2 of 4

• page 1
  • coloring header backgrounds
  • coloring text backgrounds with divs
  • divs with width value
• page 2
  • boxing with a border
  • using a thick border
  • using the width attribute
• page 3
  • boxing a header
• page 4
  • coloring code tags

boxing with a border

Let's put a border that is one pixel wide around a DIV element and take away the other style elements except for the background color for simplicity.

<div style="background:red;
	border-width:1px;">some text<br>
some more text of a different length<br>
some more text of a much greater length
</div>

we see in NN4.7:

In IE5.0 and NN6.0, just like when the WIDTH property is not set, the background color runs all the way to the right margin. But in NN4.7 we see the coloring taken all the way out to the end of the longest line of text and a box is formed. However, note that the border is offset from the box of color. This offset appears to be about two pixels thick.

using a thick border

We can make the border any color we choose. We can also increase the thickness of the border. Let's increase the thickness of the border to try to get rid of the gap between the border and the colored box in NN4.7.

<div style="background:pink;
	border-width:1px;border-style:outset;">
some text<br>
some more text of a different length<br>
some more text of a much greater length
	</div>

I'll save you the graphic: all the above code does is increase the thickness of the border but still leaves a gap between the colored text background and the border.

In IE5.0 and NN6.0 we only get color all the way to the right margin with a thick bevel edge.

using the width attribute

Let's set the WIDTH of the DIV element in order to get NN4.7 and IE50 to render the DIV box a little more alike. This is combining what we know so far: NN4.7 will color a box behind text if a border is set, and that IE50 will do the same if the WIDTH property is set. By using both properties of the DIV, let's see if we can make a box of color with text inside.

<div style="background:red;
	border-width:1px;border-style:outset;
	width:2.8in;">
	some text<br>
some more text of a different length<br>
some more text of a much greater length</div>

we see in NN4.7:	we see in IE50:
we see in NN6.0:

Now IE5.0, NN6.0 and NN4.7 present the DIV element fairly similarly. Let's set the border color to the background color of the page. I'm not setting BORDER-STYLE.

<div style="background:red;
border-width:1px;
width:2.8in;border-color:white;">
some text<br>
some more text of a different length<br>
some more text of a much greater length
</div>

we see in NN4.7:

Now NN4.7 and IE5.0 are rendering the box of color with text inside very similarly. The result is not identical (remember the offset border for the box in NN4.7) but fairly close.