SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : Removing Margins
By Scott Isaacs

Both Netscape Navigator and Internet Explorer display a small default margin around your text. The size of this margin can be customized in Internet Explorer 3.0/ 4.0 and Netscape Navigator 4.0.

While you can customize the margins, you need to use a different technique for each browser. Internet Explorer 3.0 and Netscape Navigator 4.0 use their own proprietary enhancements, while Internet Explorer 4.0 relies on the approved CSS1 recommendation.

Internet Explorer 3.0

Removing margins from IE 3.0 requires you to use two attributes on the BODY element, TOPMARGIN and LEFTMARGIN. Both these attributes take the size of the margin in pixels. To remove the margin from Internet Explorer 3.0: 

  <BODY TOPMARGIN=0 LEFTMARGIN=0>

Netscape Navigator 4.0

Netscape Navigator 4.0 uses a similar approach to Internet Explorer 3.0 for removing margins. The only difference is Netscape has chosen to create two different proprietary attributes than those used by Explorer 3.0. In Navigator 4.0, you use the following two attributes on the BODY: MARGINWIDTH and MARGINHEIGHT. To remove the margin from Netscape Navigator 4.0: 

  <BODY MARGINWIDTH=0 MARGINHEIGHT=0<

Internet Explorer 4.0

Internet Explorer 4.0 supports the TOPMARGIN and LEFTMARGIN just like IE 3.0 for removing margins, but also supports the CSS1 recommendation for removing the margin. CSS is the only technique approved by the W3C for removing the margin. In IE 4.0, you set the CSS margin property on the BODY to 0px. This can be accomplished through global or linked style sheets or directly on the BODY element's inline style: 

  <STYLE TYPE="text/css">
    /* Global Style Sheet */
    BODY {margin: 0px}
  </STYLE>
  <BODY>
    Content
  </BODY>

Using the in-line style directly on the BODY element: 

  <BODY STYLE="margin: 0px">

Bringing it all together

Both the Navigator 4.0 and Explorer 3.0 solutions require you to use non-standard, proprietary attributes. Only Internet Explorer 4.0 correctly supports the CSS1 margin property for removing the margin. To remove the margin from all three browsers, you combine all the above techniques: 

<STYLE TYPE="text/css">
  BODY {margin: 0pt}
</STYLE>
<BODY TOPMARGIN=0 LEFTMARGIN=0 
      MARGINWIDTH=0 MARGINHEIGHT=0>
  Your Contents
</BODY>
Discuss and Rate this Article

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.