|
| |
|
|
Nicole
Posts: 2800
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline
 |
Cellpadding & Cellspacing in CSS - 5/21/2005 20:24:43
Sometimes I’m able to solve or work around the most difficult problems, yet at other times it’s the simplest thing that will stump me as in this case.
I’ve had serious problems for a long time now trying to understand the cellspacing and cellpadding attributes and how to apply them to a style sheet. I know what these attributes mean and do, but it seems they aren’t doing what I’d like them to do when I apply them to a style sheet and remove them from the code of a page.
I’m going through some old templates and removing all code that I know can be styled using CSS, cellspacing and cellpadding being two such pieces of code that up until now I’ve left in the page code because moving them to the style sheet never seemed to work.
Most of these old templates were coded using HTML 4.01 transitional, yet the same problem exists in some pages I have coded to XHTML 1.0 transitional.
Elizabeth Castro mentions in her book that the CSS values for these two attributes are “padding” and “border-spacing”, in my templates I have tables with no padding or cellspacing so when I place these into the CSS I have the following:
. . .
vertical-align: top;
background-color: #333333;
padding: 0;
border-spacing: 0;
}
Firstly, do I have the code correct in this example, or in cases where I do want padding should I have 5, 5px or 1%?
Secondly, am I correct that the padding and border-spacing should be applies to the <table> element, or should/can they be applied to <tr> or <td>?
Thirdly, I know the default values for cellpadding and cellspacing are 1 and 2, and this is seemingly what it’s defaulting to when I remove these attributes from the code of a page and place them in the CSS.
A working example of my problem is my website where I have a banner image followed underneath by a navigation menu. You’ll notice I’ve left cellspacing and cellpadding in this code but if I take it out the following occurs:
A slight gap appears under the image (I’m assuming this is the default cellspacing taking over)
The padding at the top, right and bottom is almost non-existent around the navigation menu (I’m assuming this is the default cellpadding taking over).
Can anyone please help?
Thanks
Nicole
_____________________________
Nambucca Valley & Kempsey Web Design | NixDesign
Get Netscape Navigator 9
|
|
|
|
jeepless
Posts: 213
Joined: 12/20/2003
From: Smack in the middle of USA
Status: offline
|
RE: Cellpadding & Cellspacing in CSS - 5/22/2005 1:42:55
Nicole, I can't answer all your questions but here's two:
1) Both "padding" and "border-spacing" should have a unit of measure included. Padding uses a percentage (%) or length (px, em, pt) measure; border-spacing only uses a length (px, em, pt) measure.
2) The CSS2 property "border-spacing" is not supported in IE, but I believe a few other browsers do suppport it. The only alternative is to continue using "cellspacing" in your HTML if you need IE compatibility. However, IE does recognize "border-collapse:collapse" if all you want is to eliminate the gap between cell borders. As for "cellpadding" in the HTML, it can be dropped if you add the CSS property "padding" to the <td> elements in your CSS.
Hope that helps....
Richard
| |
|
|
|
Nicole
Posts: 2800
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline
|
RE: Cellpadding & Cellspacing in CSS - 5/22/2005 3:36:11
Hi Richard,
Thanks for that, it seems to have fixed the padding issue by moving the padding to the <td> element.
Thanks again
Nicole
_____________________________
Nambucca Valley & Kempsey Web Design | NixDesign
Get Netscape Navigator 9
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
