Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Cellpadding Cellspacing in CSS

    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.
    Attached Images Attached Images  

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,297
    Thanks
    10
    Thanked 282 Times in 281 Posts
    My head just exploded.

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by tracknut View Post
    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..
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #4
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by shwekhaw View Post
    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>
    Last edited by Arbitrator; 08-10-2012 at 05:02 AM. Reason: I modified the color scheme to explicitly specify assumed defaults.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    shwekhaw (08-10-2012)

  • #6
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •