|
Beginner Tip:
Cross-Browser Page Margins
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
Many beginning webmasters try - and try again - to modify the default page margins that Netscape and Explorer place around the outside of every Web page. That process is complicated by the fact that both browsers use proprietary tags to control page margins in basic HTML. We'll show you two ways to control those margins with just a few lines of code.
Margins In Internet Explorer
Most WYSISYG editors allow you to quickly modify page margins, but you may not always achieve the intended effect. That's because most editors (FrontPage especially) control margin height and width using these Explorer-specific attributes:
<BODY topmargin=0 leftmargin=0>
|
This positions the page elements and text in the upper left-hand portion of the page. You can change the margins simply by changing the value. For instance, set topmargin=10 and the top of the page immediately drops down 10 pixels. Move the page elements to the right by increasing the leftmargin value.
If you're absolutely sure that all visitors will view your page only with Explorer (in an Intranet situation, for example), you can stop there. However, there's a good chance that a substantial percentage of visitors will be browsing with Netscape.
Margins in Netscape
Since topmargin and leftmargin are Explorer-specific attributes, you'll need to include Netscape's proprietary attributes inside the BODY tag to get the same margin effect. You may have to add the Netscape-specific attributes by hand if you're using a WYSIWYG editor.
<BODY topmargin=0 leftmargin=0
marginwidth=0 marginheight=0>
|
Note: this technique is one of the few safe uses for browser-specific HTML code. Other proprietary tags and attributes like BACKGROUND (when used in tables), ILAYER, and MARQUEE may ruin your layout or fail to display important information. Use a good HTML check and repair tool like HTML Toolbox to scan your page for incompatible code.
Style Sheets Cover Both Browsers
It's not too hard to include all four attributes in the BODY tag, but note that you can only control the top margin and the left margin with them. What if you want a certain margin on the bottom and right side of your Web page and you want a single definition to work in Explorer and Netscape?
Cascading Style Sheets (CSS) give you that control. Define the STYLE inside your document's HEAD section:
<STYLE type="text/css" >
BODY {margin:0}
</STYLE>
|
That definition will set all margins equal to 0 pixels, so your page content displays right up against the edge of the page on all four sides.
But you can define all four sides individually if you want:
<STYLE type="text/css">
BODY {
margin-top:0;
margin-bottom:0;
margin-left:20;
margin-right:20
}
</STYLE>
|
This STYLE specification is supported by Netscape 4.7+ and Explorer 4.x+. WebTV just ignores it and displays the page with default margins.
Of course, not all CSS effects display this uniformly: many designers get frustrated with buggy CSS support in Netscape. Other mistakes can ruin your page layout too, like simple JavaScript errors or easy HTML mistakes.
Be safe and test your page in as many browsers, browser versions, and operating systems as possible. NetMechanic's Browser Photo makes testing easy and cost-effective. You don't have to load multiple browsers or buy a lot of equipment to test your pages. Just let Browser Photo show you actual screen shots of your page in 16 different browser and operating system combinations.
|
