page margins

how NN and IE handle page margins

page 3 of 4

page 1
• setting css page margins
• introducing a table
page 2
• using a full-width table
• centering the table
• centering out of p tags
• the unpredictable nn
page 3
• setting margins with p tags
• introducing another table
• centering the new table
page 4
• hard coding margins
• centering with hard coded margins

setting margins with p tags

If we're going to have so much trouble with NN4.7 and BODY styles, then let's abandon the BODY style and go to the P tag. If we set the P tag margins through styles, and wrap all elements in P tags, then we can simulate body-level margins.

Below is the styles for the P tag. Notice that the BODY style is empty.

p {margin-left:15%;margin-right:15%;background:gold}
BODY {}

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

The representations of the pages are fairly similar. We expect that NN4.7 will not color the entire width of the paragraph tag, but instead only behind the text in the paragraph.

introducing another table

Let's introduce a left-aligned table like we did before. We'll wrap it with paragraph tags with some text. We're looking for the text to flow around the table

	<table border="1" bgcolor="#FF0000" 
		width="30%" cellpadding="0" 
		cellspacing="0"
		align="left">
	<tr><td>hi, here's some important<br>
		information for you</td></tr>
	</table>

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

NN4.7 and NN6.0 have completely collapsed trying to align the table. NN4.7 not only has lost the formatting information for the P tag that the table is in, but now have lost the P formatting information for the paragraph that follows. If what I just said sounds familiar, it's because I said it about NN4.7 when we tried to get it to work with a left-aligned table on a previous page.

centering the new table

Let's now center the table like we did before. We'll wrap it with paragraph tags without any text, and we'll make it full width or 100%.

<table border="1" bgcolor="#FF0000" 
	width="100%" cellpadding="0" 
	cellspacing="0"
	align="center">
<tr><td>hi, here's some important<br>
	information for you</td></tr>
</table>

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

NN4.7 and NN6.0 format the table a little more intuitively. It does not respond to the P tag formatting, but instead draws the table from page margin to page margin. IE5.0 starts at the left P margin, but the draws the table to the right page margin.