coloring text backgrounds

how NN and IE handle coloring text backgrounds

page 1 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

coloring header backgrounds

Below is the CSS code for coloring header element backgrounds.

<h1 style="background:blue;">
this is a header 1</h1>

<h1 style="background:blue;">
this is another header 1</h1>

we see in NN4.7	we see in IE5.0
we see in NN6.0

NN4.7 will only color the text from beginning to end of the text. IE5.0 and NN6.0 run the color all the way over to the right side of the page.

Let's add a WIDTH value. The code is below.

<h1 style="background:blue;
width:3.0in;">this is a header 1</h1>

<h1 style="background:blue;
width:3.0in;">this is another header 1</h1>

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

NN4.7 and IE5.0 and NN6.0 respond to the WIDTH value in different ways. All will wrap text to fit the WIDTH, but NN4.7 will not color the full WIDTH. Instead NN4.7 will only color directly behind the text. Let's turn to DIV tags and regular text to see if we can find a solution to making IE5.0 and NN6.0 and NN4.7 render colored backgrounds the same way.

coloring text backgrounds with divs

One way to color backgrounds is to use DIV elements. DIV tags are used to divide web pages into formatted areas. One kind of formatted area designers look for is a colored box. The code for coloring behind text by setting the background color in DIV tags is below.

<div style="background:red;">
some text<br>
some more text of a different length<br>
</div>

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

Again IE5.0 and NN6.0 color the background of the text all the way to the right margin while NN4.7 only colors behind the text, and does not extend the coloring past the end of the text

divs with width value

Let's try to make a box by setting the WIDTH value of a DIV.

Here is the code to create a box with a DIV

<div style="width:2.0in;background:green;">
here is a box<br>
here is more stuff<br>
here is a even more stuff, so much it'll definitely wrap </div>

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

NN4.7 does not respond to the WIDTH value in a predictable way, yet IE5.0 and NN6.0 do. Again, NN4.7 only colors directly behind the text, yet will wrap text to fit the WIDTH value.