Lipstick Monkey Design
home - resources - help center - faqs - contact

Browser Compatibility: Consistent Page Margins

Let's start with a quickie HTML lesson. If you go into any HTML page and view the source, you'll probably see a line of code that starts out like this:

<BODY ...>

This is the BODY "tag", and it tells the browser where the viewable portion of your web site begins. Quite often you'll see other things inside of the BODY tag, which define things like the page background color, text color, and more.

If you have a page open in FrontPage and right-click and choose "Page Properties," then click on the "Margins" tab, you can specify how much of a margin you want on the page. FrontPage 2002 allows you to specify the top and left margin. Many page layouts in templates set the margin to "0" so that some element of the page can line up right on the edge. Checking the "specify... margin" and setting to zero will change the BODY tag to look something like this:

<BODY topmargin="0" leftmargin="0" ...>

In the diagrams below, the first picture shows the page in Internet Explorer before the change. Note the white margins around the page. The second picture shows the page after the change.

In Internet Explorer 6+, the page may show a right margin as well -- the user sees a strip of white on the right side of the page layout, next to the scrollbar. This is because Internet Explorer 6+ also seems to recognize the right margin definition, but FrontPage has not yet kept up with it. To get your page with no margins all around the edges in Internet Explorer 6+, you have to go manually into the HTML and add:

<BODY topmargin="0" leftmargin="0" rightmargin="0" ...>

If your page also shows a bottom margin, add:

<BODY bottommargin="0" ...>

But now let's go into Netscape. It may be to your surprise that the page shows with margins, even though you've already supposedly defined the margins to be zero:

This is because Netscape uses different code to define margins. So, you once again have to go into the HTML and manually add:

<BODY marginwidth="0" marginheight="0" ...>

A note -- these definitions can be in any order, but all have to be within the <BODY ...> tag.

What does this mean for you?

For browser-compatibility with page margins, make sure that your <BODY...> tag looks like:

<BODY marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" ...>

This needs to be done for each page in your web.

Next: Background Images & Colors in Table Cells

 

home - contact - policies