aligning text

how NN and IE handle aligning text

page 1 of 2

• page 1
  • centering text with colored divs
• page 2
  • left alignment with colored divs
  • right alignment with colored divs
  • more right alignment with colored divs

centering text with colored divs

Centering text with the DIV element is trivial. The browsers respond predictably to using a DIV element with its ALIGN property set to CENTER. The differences come in when they render text in a DIV that has a colored background.

From the other chapters we found that a way to get NN4.7 and IE5.0 to render a colored box using a DIV element in the same way. We colored the background, set a WIDTH, and then used a border one pixel thick. We set the border color to the same color as the web page in order to make the border disappear in NN4.7. IE5.0 seems relatively unbothered by the one pixel wide border.

Below is the code for making a red box with some text in the manner described above.

<div style="background:red;
	width:2.5in;border-width:1px;
    border-color:white;">
      here is some text
</div>

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

Now let's add TEXT-ALIGN:CENTER to the style of the DIV.

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

We see that IE5.0 and NN6.0 aligned the text in the DIV element. NN4.7 aligned the entire DIV element but did not align the text relative to the DIV box at all.

Let's note here that removing the TEXT-ALIGN property from the DIV style and wrapping the above code in another DIV element with its ALIGN property set to CENTER gives the exact same effect in NN4.7. IE5.0 and NN6.0, however, will align the DIV to the center of the page as well as center the text within the DIV.

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

Finally, we can get NN4.7 to center the DIV, but again not the text inside the DIV by setting the ALIGN style property to CENTER. IE5.0 and NN6.0 will not respond to this code.