HTML/CSS Getting that relative table to 0, 0

Printable View

May 15th, 2002, 04:42 PM
CiberTHuG

HTML/CSS Getting that relative table to 0, 0

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Test Page</title> <style type="text/css"> body { background: #ff00ff; color: #000000; margin: 0px; border: 0px; padding: 0px; text-align: center; } </style> </head> <body> <table style="width: 100%; padding: 0px; margin: 0px;"> <tr style="padding: 0px; margin: 0px;"> <td style="color: white; background-color: black; margin: 0px; border: 0px;">Foo</td> </tr> </table> </body> </html>

No matter how hard I try, there is still an ugly pink line around the edge of that little black box. Regardless of which browser I use. The problem is, I've seen this solved without absolute positioning. But the page it was one is a jumble of CSS and deprecated attributes, so I don't know which one is actually achieving the results.
May 15th, 2002, 11:57 PM
Cudabean

Well, if it's any consolation, if you set:

background: #888888;

The border is no longer pink, it's grey ;)

Seriously though, Why avoid absolute positioning? Another cheat would be to use a background image.

cudabean
May 16th, 2002, 08:52 AM
CiberTHuG

Because it has been done without absolute positioning. I have some old pages that I'm trying to update. They use a mix of deprecated attributes and bad CSS, and they get the effect I'm going for.

I just can't figure out why it insists on having that border. I guess I could set a negative magin or padding.

And the pages are white. The awful color was just so I knew the CSS was working. I just randomly toggled two of the nibbles.
May 16th, 2002, 10:46 AM
JoshT

Is the <html> tag a valid block per the specs? If so, it would have a default stylesheet per browser you'd have to override along with the <body> tag.
May 16th, 2002, 11:31 AM
Jerry Grant

<table cellspacing="0">

You need to set the cellspacing of your table to 0

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Test Page</title> <style type="text/css"> body { background-color: #ff00ff; color: #000000; margin: 0px; border: 0px; padding: 0px; text-align: center; } </style> </head> <body> <table style="width: 100%; padding: 0px; margin: 0px" cellspacing="0"> <tr style="padding: 0px; margin: 0px;"> <td style="color: white; background-color: black; margin: 0px; border: 0px;">Foo</td> </tr> </table> </body> </html>
May 16th, 2002, 11:33 AM
CiberTHuG

Interesting, so I looked.

The html tag is part of the 4 standard, but it is an optional/optional tag. It is assumed after the DTD declaration that the whole document is an HTML (or XML) document. I can understand not using the tag, since gaving a grandparent tag is redundant, and confusing since it isn't part of the DOM.

Setting the attributes in the CSS for the html tag didn't affect the page. Blah. Neither did removing the html tag (which I might do more often, I'm not sure).
May 16th, 2002, 11:38 AM
CiberTHuG

RE: CellSpacing

Yeap, that works. What a crock. I checked the HTML 4 specs. These attributes have not been deprecated. Odd, I assumed that they would be dismissed in favor of CSS. But you simply can't get the same affect in CSS. Why?

I'm not sure if there was some design behind that, or oversight, or what. Blah.
May 16th, 2002, 01:24 PM
JoshT

It's the little known table CSS border-collapse!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test Page</title> <style type="text/css"> html { margin: 0px; padding: 0px; } body { background-color: blue; color: #000000; margin: 0px; border: 0px; padding: 0px; text-align: center; } table { width: 100%; padding: 0px; margin: 0px; border-collapse : collapse; } tr {padding: 0px; margin: 0px;} td {color: white; background-color: black; margin: 0px; border: 0px;} </style> </head> <body> <table style="" > <tr style=""> <td style="">Foo</td> </tr> </table> </body> </html>
May 16th, 2002, 02:16 PM
CiberTHuG

Rock on. I was playing with border-spacing but not getting the desired affect. I also was playing with the rules attribute of the table, which didn't have the desired affect in every browser. Border-collapse doesn't do anything for Communicator 4.79, but that is no great loss. It makes other browsers look consistent.
May 22nd, 2002, 12:29 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Test Page</title> <style type="text/css"> body { background: #ff00ff; color: #000000; margin: 0px 0px 0px 0px; border: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align: center; } </style> </head> <body topmargin="0" leftmargin="0"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr style="padding: 0px; margin: 0px;"> <td style="color: white; background-color: black">Foo</td> </tr> </table> </body> </html>
May 22nd, 2002, 01:52 PM
JoshT

Umm...

[nitpick]

<body topmargin="0" leftmargin="0"> - This is not valid HTML, AFAIK.
<table width="100%" border="0" cellspacing="0" cellpadding="0"> - This is depreciated, to be replaced with CSS...

[/nitpick]
May 23rd, 2002, 05:04 PM

Josh, or anybody for that matter, can you refresh my memory as to what the css equivelant is to that? mainly the margins?
May 23rd, 2002, 05:13 PM
CiberTHuG

There are sometimes a few ways to write the same thing in CSS. I'm not sure why there is the redundancy, but a very verbous way of replacing what Josh pointed out would be

Code:

<body style="margin-top: 0px; margin-left: 0px;"> <table style="width: 100%; border-style: none; border-width: 0px;">

I don't remember cell spacing and padding. You can set the margins and padding on the cells themselves, but there are models for the whole table, like collapsing borders, which will get a similar affect.

As always, check the links in my sig.
May 23rd, 2002, 05:15 PM

thanks travis, and I have been to the links in your sig quiet a few times.
May 23rd, 2002, 10:24 PM

just out of curiosity, Travis, you wouldn't know what teh css for the body margins for NS4.xx, beside marginheight in the body tag.

not that you would care or anything :)
May 24th, 2002, 08:24 AM
CiberTHuG

No, not at all. If it doesn't support the standard (which I've found it doesn't), then I haven't a clue. I would hope that developer.netscape.com would have documentation, but I somehow imagine this has been shuffled under the rug.

For the audience at home, that is the reason for a standard, so Travis only has to learn how to do it once, not once per browser.