A recurring question on Web design e-mail lists is "how can I get my image and/or text to align directly with the browser edge?" because designers want to be able to control the absolute placement of elements on the page, which unfortunately is not the case with HTML. It's one of those iffy questions because there is no one simple solution to solve this problem. But what is the problem more specifically?
It would follow that if you have a document that begins <HTML><HEAD><TITLE>blah blah</TITLE></HEAD><BODY><IMG SRC=...>, etc., when your document loads, the image would appear in the top left-hand corner. After all, there are no spaces, paragraphs, or break tags. But that would be too easy. In fact, different browsers, even different versions of the same browser and even the same version but for different platforms, all behave differently. Both Netscape Navigator and Microsoft's Internet Explorer (IE) will offset consistently, 8 pixels to the right and 8 pixels down, on the Mac platform. Navigator for Windows is more schizophrenic with differing offsets between versions. And by far the worst offender is IE for Windows, which will offset 10 pixels to the right and 20 pixels down.
To get an idea of what I'm talking about, try viewing David Siegel's Browser Offset Test through the various browsers that you may use and you will begin to see the problems.
Marginwidth and Marginheight
There are a couple of ways to achieve the nonoffset look. "MARGINHEIGHT=x"
and "MARGINWIDTH=x" originated with Netscape as frame tag attributes. They
are implemented within the <FRAME> tag, and by specifying "x" you can
control the placement of your image. IE also allows for these attributes to
be added to the <BODY> tag, but this is a single platform solution. In
some instances this has proven to be rather fugitive and are not guaranteed
to work during every document load. Also, you have to remember that your
document viewed with any other browser will offset your image.
The Frames Hack
Figure 1. Sweet 'N Low packet before and after the additon of the MARGINWIDTH=O MARGINHEIGHT=0 attribute within a <FRAME> tag.
If you've embraced frames within your site you can incorporate this neat frame hack that will work with both Netscape and IE.
<HTML> <HEAD> <TITLE>blah de-blah</TITLE> </HEAD> <FRAMESET ROWS="100,*"> <FRAME SRC="document.html" BORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0> </FRAMESET> </FRAMESET> <NOFRAMES> <META HTTP-EQUIV="refresh" CONTENT="0; URL=document.html"> </NOFRAMES> </HTML>
The frameset will take up the entire window. The "NOFRAMES" includes a
client pull that sources the identical document. The only difference is
that that non-frames browser will include the offset, whereas the frames will
be flush with the top and left side.
Designer E-mail Lists Resources
Next week: The Bermuda Rectangle . . .
Past installments of Design
Diary
Lists are wonderful environments to glean bits and pieces of information. Make sure that you read the FAQ (Frequently Asked Questions) if they have one before you post to avoid being flamed. As with any list, having a thick skin or flame-retardent underwear is a necessity. Two lists worth checking out are Lynda's Homegurrrl Designers' List or the Advanced HTML List (which has a list threaded list).
