PDA

Click to See Complete Forum and Search --> : HTML/CSS Getting that relative table to 0, 0

CiberTHuG
May 15th, 2002, 04:42 PM
<!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.
Cudabean
May 15th, 2002, 11:57 PM
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
CiberTHuG
May 16th, 2002, 08:52 AM
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.
JoshT
May 16th, 2002, 10:46 AM
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.
Jerry Grant
May 16th, 2002, 11:31 AM
<table cellspacing="0">

You need to set the cellspacing of your table to 0

<!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>
CiberTHuG
May 16th, 2002, 11:33 AM
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).
CiberTHuG
May 16th, 2002, 11:38 AM
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.
JoshT
May 16th, 2002, 01:24 PM
It's the little known table CSS border-collapse!

<!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>
CiberTHuG
May 16th, 2002, 02:16 PM
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.
WALDO
May 22nd, 2002, 12:29 PM
<!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>
JoshT
May 22nd, 2002, 01:52 PM
Umm...



<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...
scoutt
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?
CiberTHuG
May 23rd, 2002, 05:13 PM
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


<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.
scoutt
May 23rd, 2002, 05:15 PM
thanks travis, and I have been to the links in your sig quiet a few times.
scoutt
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 :)
CiberTHuG
May 24th, 2002, 08:24 AM
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.