Graphic aligned in top left corner

Forum Moderators: open

Message Too Old, No Replies

Graphic aligned in top left corner

WallaceCleaver

9:18 pm on Sep 11, 2004 (gmt 0)

I would like to align my header graphic flush with the top of the page and the left side of the browser. I know that there is a snippet of html that will achieve this, but I can't find it online. Could someone please tell how to do this?

tedster

10:03 pm on Sep 11, 2004 (gmt 0)

CSS is the way to go, and <body style="margin:0;"> should do it. If you've got an external CSS file, put the rule there: body {margin:0;}

In a pinch, you might also use a rule like #corner {position:absolute;top:0;left:0;z-index:0;} with <img id="corner"> for the image involved, but that's usually not the best approach.

There are other approaches that just work on "some" browsers with "some" DTD's - but the above approach is standard. I suggest avoiding "leftmargin=0 topmargin=0 marginheight=0 marginwidth=0" and such, because they are proprietary IE attributes and will cause trouble with strict DTDs and cross browser rendering.

encyclo

11:53 pm on Sep 11, 2004 (gmt 0)

Opera likes the padding set to zero on the body element, not the margin (which is actually very logical, if you think about it), so it is best to set both:

body { 
margin:0; 
padding:0; 
}

I suggest avoiding "leftmargin=0 topmargin=0 marginheight=0 marginwidth=0" and such, because they are proprietary IE attributes

I think that two of them are proprietary IE attributes, and the other two are proprietary Netscape ones. Can't remember which one's which, though! Definitely not recommended, as they'll never validate with any doctype - but if you absolutely need 100% Netscape 4 compatibility, then you're forced to use them because Netscape 4 doesn't manage with just the CSS solution.