How does he do that?

October 31, 2001 2:35 PM

Html question: how does Matt get the top table to extend all the way to the top, left and right, with no space? How does he get the Meta-logo and Community 'blog graphics to sit flush with the edges of the page?
Whenever I try something like that, there's always space between the edge of the page and the table and between the edge of the table and the images.
posted by signal to MetaFilter-Related at 2:35 PM (12 comments total)

body bgcolor="#666666" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0"

Is that what you mean?
posted by Karl at 2:50 PM on October 31, 2001

I think so. how about between the image and the table edge?

Thanks karl.
posted by signal at 2:53 PM on October 31, 2001

Try butting the [img] tag with the [table] tag ... no trailing spaces or [br] a table will automatically break to a new line (i.e. [img src='blah.gif'][table][/table] )
posted by deviant at 3:05 PM on October 31, 2001

also, the table needs its cellspacing and cellpadding set to 0
posted by mathowie (staff) at 3:10 PM on October 31, 2001

Aha. I see. Thanks to all.

Do the left- and top-margin settings cascade down to the table level?
posted by signal at 3:12 PM on October 31, 2001

Just picking nits, those attributes aren't compliant with the W3C CSS spec. You may want to use
BODY {margin: 0px; padding: 0px; background: #666; }

if you care about such nuances...
posted by fooljay at 3:20 PM on October 31, 2001

Fooljay: would the "margin: 0px" setting handle left, top & right, for both body and tables?
posted by signal at 3:26 PM on October 31, 2001

No you have to set CELLPADDING=0 CELLBORDER=0 BORDER=0 on your tables. Or else use a style sheet.
posted by kindall at 3:28 PM on October 31, 2001

Sorry, I was answering the question before fooljay's reply.
posted by kindall at 3:29 PM on October 31, 2001

signal - it's best to do it with cascading style sheets:

for an image to sit flush --> body { background: #fff url(/image/blah.gif) no-repeat scroll 0% 0%; } (as long as the image extends off the page)

for the tables to sit flush --> body {margin:0px;} (setting the margins at 0).
posted by catatonic at 4:25 PM on October 31, 2001

It's not necessarily "best" to do it with stylesheets; some browsers (yes, Netscape 4.x, I'm looking at you) don't support setting the margins on the body via style sheets. If a significant portion of your audience uses older browsers, you should do it both ways for maximum compatibility.
posted by kindall at 4:43 PM on October 31, 2001

I think some browsers actually set the body margin with padding instead of margin, so:

body {margin: 0px; padding; 0px}

A good experiment would be to set a border on body and then look at it in lots of browsers to see whether there is a space outside the border or inside.

I've also seen people do this on the html element too (which isn't really kosher, but the CSS spec is vague on whether html has any style properties).
posted by rodii at 4:45 PM on October 31, 2001