Margins & Offsets

--oo00oo--

How do I control Margins? Ah, now this is a bit tricky. You see, there's no specific tag to control it, well, until you get to IE 3.0. That's right, it's taken as long as IE 3 before this tag has been implemented. You see each browser has it's own default margins, usually it's 8 top and 8 left on Apple Mac's. But it varies greatly on the PC versions of the software, with only IE 3 allowing you to control them.

To do it in IE 3, you add LEFTMARGIN= and/or TOPMARGIN= to the <BODY> ... </BODY> tag. So for example, your body tag could read <BODY BGCOLOR=#FFFFFF TEXT=#000000 LINK=#008080 ALINK=#FF0000 VLINK=#000080 TOPMARGIN=50 LEFTMARGIN=0>.

This would give you a web page that is 50 pixels from the top, and flush against the left hand side.

Other Techniques Let's say that you've made a document with the above margins, you have some image buttons flush to the left hand side. But you want your text to be indented a bit, how do you do it. Well, you can do it one of several ways, add a <UL> ... </UL> tag around it.

IT GIVES THIS EFFECT
IT GIVES THIS EFFECT
IT GIVES THIS EFFECT

However, it has the (sometimes) undesirable effect of acting as if it were a <P> tag, giving a lines space above and below the text. You could use a <BLOCKQUOTE> ... </BLOCKQUOTE> tag.

IT GIVES THIS EFFECT
IT GIVES THIS EFFECT
IT GIVES THIS EFFECT

But it has the same effect. You also have little control over the size of the gap. Another way is to use a hidden table method, which I'll go over in another section.

The final method, and best in my opinion, is to use Frames.

Frames Frames can be extremely confusing. You have one separate .htm file to define the frames. This says how many sections your screen is split into, and it says what .htm file goes with what frame. It's not a well known fact, that you can have just one frame. This seems pointless, as you may as well just not use it. But it has the advantage of being able to control the margins of a page, and until a better and well supported method comes along, it's the one I going for.

To see an example page that uses this method, click here.

This consists of two web pages, the frames page which is the controller, and the contents page that you see. The frames page contains the following FRAME tag.

<FRAMESET ROWS = "100%,*" FRAMEBORDER = NO BORDER = 0>
<FRAME SCROLLING=AUTO SRC = "ex1x.htm" NAME = "main" MARGINWIDTH = 1 MARGINHEIGHT = 1>
</FRAMESET>

This appears to define two frames, in rows. The first occupying 100% of the screen, the second occupying the rest. However, the details for only the first frame are given, and it works just fine. As you can see we've set the MARGINWIDTH and HEIGHT to 1. This is because FRAMES don't allow a 0 value. So it's best to put 1 instead of 0, just in case support for 0 values is added in the future. This is because all your pages will be 1 pixel out.

Remember if you use this technique, to add TARGET="_top" to the <A HREF> tag, for external pages, otherwise they'll all have 1 pixel margins and won't look as the designer intended.

This method is not ideal however, as it can cause problems with some JavaScript pages which make use of "Hidden Frames" and other FRAME techniques, unless it is linked properly with TARGET="_top".