Cellpadding Cellspacing in CSS

shwekhaw · 08-10-2012, 12:23 AM

Hi. I have been trying to update a site to be HTML5 compliant. Some table attributes needs to be changed to css formating to be compliant. I enjoy solving the problem myself but I have spent last 3 hours trying to figure out css code for cellpadding and spacing and this just giving me headache. I simplify the code for troubleshooting.

Here is original code with table attributes. It show up in browser fine. But if you change the Doctype to <!DOCTYPE HTML>, the layout all screwed up.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
.MenuBorder {
        BACKGROUND-COLOR: #000000;
}
.HeadLine {
        BACKGROUND-COLOR: #ADADAD;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<BODY>
<TABLE border="0" cellpadding="0" cellspacing="0" width="100%">
<TR>
<TD colspan="2" class="MenuBorder"><IMG src="spacer.gif" width="1" height="1" border="0"></TD>
</TR>
<TR>
<TD class="HeadLine" height="22">
<TABLE border="0" cellpadding="0" cellspacing="0" width="100%">
Menu1 | Menu2 | Menu3 | Menu4 ................
</TABLE>
</TD>
</TR>
<TR>
<TD colspan="2" class="MenuBorder"><IMG src="spacer.gif" width="1" height="1" border="0"></TD>
</TR>
</TABLE>
</body>
</html>

Here is the code I come up with after reading a lot into CSS. And it still does not work.

Code:

<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
table.space {
border-collapse : collapse; 
width:100%;
}
.MenuBorder {
        BACKGROUND-COLOR: #000000;
		padding:0px;
		width:100%;
}
.HeadLine {
        BACKGROUND-COLOR: #ADADAD;
		padding:0px;
		width:100%;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<BODY>
<TABLE class="space">
<TR>
<TD colspan="2" class="MenuBorder"><IMG src="spacer.gif" width="1" height="1" border="0"></TD>
</TR>
<TR>
<TD class="HeadLine" height="22">
<TABLE class="space">
Menu1 | Menu2 | Menu3 | Menu4 ................
</TABLE>
</TD>
</TR>
<TR>
<TD colspan="2" class="MenuBorder"><IMG src="spacer.gif" width="1" height="1" border="0"></TD>
</TR>
</TABLE>
</body>
</html>

Please check for me what I am doing wrong here. The image spacer is 1x1 pixel (attached). It is not showing up as border line but as thick cells on top and bottom of menu bar.

tracknut · 08-10-2012, 12:35 AM

My head just exploded.

AndrewGSW · 08-10-2012, 12:58 AM

Quote:

Originally Posted by tracknut

My head just exploded.

I agree

. A 1px spacer-gif in particular makes me weep

But.. to get up-to-speed:

DON'T USE TABLES FOR LAYOUT;
Avoid nested tables at all costs;
Don't use spacer-gifs (ugh!);
Use lower-case for tag-names;
Use css;
Use css!
css properties are lower-case (BACKGROUND-COLOR!)

You can't put plain text in a table (Menu 1, etc.) - it would need to be within table cell(s).
If you want an image to behave as a border then set it as the background image, position it and repeat it (horizontally or vertically).
Cell-padding is unlikely to achieve anything if there is no content for it to pad against; put a non-breaking space in the cell or, preferably, give the cell(s) a width.

Read up on CSS and HTML5(?!) - I don't know how you are concluding that what you are attempting (currently) is compliant in any way. (You say you've read up a lot on css, but there is hardly any css in your code.)

This is probably not what you want to hear..

shwekhaw · 08-10-2012, 02:15 AM

I am updating a 10 years old site to be compliant. The whole site has such nested tables. The rest of the coding is not that much problem to change. This table layouts are making my head spin.

It is what it is and I am not trying to rewrite the whole thing. I added Menu 1 etc is just to simpify table for troubleshooting. I thought with some help, I can do the changes myself.

Anyway, you guys did not answer my question.
It can be...
"yes here is the error you made ..." (I would appreciate the help)
or
"no it is not possible to achieve the same result in HTML5....and here is why", (I might get a freelancer to do site overhaul).
or
"sorry I do not know... (better than bashing someone asking help)".

Otherwise please leave the post for someone else who can give straight answer. I rather not have the thread overlooked by someone who can answer since it has been replied.

Arbitrator · 08-10-2012, 04:58 AM

Quote:

Originally Posted by shwekhaw

Please check for me what I am doing wrong here. The image spacer is 1x1 pixel (attached).

The problem is that your code is using table cell background colors (behind transparent GIF images) to simulate borders. Borders can be created directly with CSS:

Code:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Untitled Document</title>
		<style>
			/* Defaults */
			* { margin: 0; padding: 0; }
			
			/* Layout */
			html { margin: 1em; }
			.menu { min-height: 22px; border-top: 1px solid; border-bottom: 1px solid; }
			.menu li { display: inline; }
			.menu li::after { content: " |"; }
			.menu li:last-child::after { content: ""; }
			
			/* Layout with Browser‐Specific Fixes */
			.menu li:after { content: " |"; } /* WIE8 does not recognize CSS3 pseudo‐element syntax (with double‐colons) */
			.menu li:last-child:after { content: ""; } /* WIE8 does not recognize CSS3 pseudo‐element syntax (with double‐colons) */
			
			/* Color Scheme */
			html { background-color: white; color: black; }
			.menu { border-top-color: black; border-bottom-color: black; background-color: #adadad; color: black; }
		</style>
	</head>
	<body>
		<ul class="menu">
			<li>Menu1</li>
			<li>Menu2</li>
			<li>Menu3</li>
			<li>Menu4</li>
		</ul>
	</body>
</html>

shwekhaw · 08-10-2012, 07:48 AM

Thank you Arbitrator!!
I got rid of gif and used your menu class and it is lovely. I thought about border. I did not know you can have border only on top and bottom and not on the sides.

Thank you again.