CSS & Table Spacing And Padding - Just Can't Get It To Work!

**fillup07** · Sep 28, 2002 08:10

I looked at this thread, but it didn't help me. http://sitepointforums.com/showthrea...threadid=78241

Here is my code:

Code:

<html>
<head>
<style>
.menutable {BORDER: #6699cc 1px solid}
.menuheadingrow {background-color: #6699CC; color: #000000; text-decoration: none}
.menuitemrow {color: #000000; text-decoration: none}
.menuitemcolumn {background-color: #E2E2E2; BORDER-RIGHT: #cccccc 1px solid; BORDER-LEFT: #f7f7f7 1px solid; BORDER-BOTTOM: #cccccc 1px solid; BORDER-TOP: #f7f7f7 1px solid}
</style>
</head>
<body>
<table class="menutable" width="140" cellpadding="0" cellspacing="0">
    <tr class="menuheadingrow"> 
      <td>Menu Heading</td>
    </tr>
    <tr class="menuitemrow"> 
      <td class="menuitemcolumn">Item 1</td>
    </tr>
    <tr class="menuitemrow"> 
      <td class="menuitemcolumn">Item 2</td>
    </tr>
  </table>
</body>
</html>

An example is here:
http://www.ax2.org/phil/cellcolors2pcss.htm

That is exactly how I want it to look.

But currently, the Table isn't using cellpadding or cellspacing in the CSS and I need it to.

Please, before posting, TEST what you say and make sure it turns out to look the exact same
(because I've tried soooo many things and it hasn't worked).

Thanks a lot
Phil

**mmi** · Sep 28, 2002 09:11

hey Phil - maybe it's me, but I think your question is a little hard to understand - you say you have the display you want, but you'd like to control this table with css rather than using the padding and spacing attributes for TABLE - can you explain why?

as this page indicates, using css padding for TABLE is problematic in all the major browsers - have you tried border-spacing?

**fillup07** · Sep 28, 2002 18:37

Originally posted by mmi
hey Phil - maybe it's me, but I think your question is a little hard to understand - you say you have the display you want, but you'd like to control this table with css rather than using the padding and spacing attributes for TABLE - can you explain why?

as this page indicates, using css padding for TABLE is problematic in all the major browsers - have you tried border-spacing?

Thanks for your response...

Correct - I have the correct display, but I need it done in all CSS instead of the HTML cellpadding and cellspacing and partial CSS.

I have tried border-spacing as well, couldn't get it to work.

Any ideas?

**mmi** · Sep 28, 2002 21:59

but I need it done in all CSS

since you say you've struggled with this some already, I'm thinking if you can tell us why this is the case, that may open the door to finding a solution

**fillup07** · Sep 29, 2002 03:35

Originally posted by mmi
since you say you've struggled with this some already, I'm thinking if you can tell us why this is the case, that may open the door to finding a solution

Okay, it doesn't HAVE to be done in CSS (obviously, since I have the display already). But I really wanted it to (so all the table properties are stored in CSS and all I have to do to make the table look right is add the class.

I came here b/c I thought since this is the CSS forum you guys would know how to do it.

Thanks.

**mmi** · Sep 29, 2002 05:03

well, don't measure this group's knowledge/ability by mine - among other deficiencies, I'm not very stylish

**fillup07** · Sep 30, 2002 12:21

Anyone?

**creole** · Sep 30, 2002 14:15

I'm with MMi...I'm not really sure what you're wanting to do.

Your HTML code uses the cellpadding and spacing attributes for the TABLE tag. You use that code and say it's exactly what you want but you say that you want it to be CSS. Have you tried the padding attribute?

Also, I'm not sure why you're so focused on getting your HTML and CSS to talk to each other when as MMI mentioned there are known issues with what you're trying to do.

To be perfectly honest, trying to seperate your content from your presentation is admirable, but done properly there would only be one or two places that you would need to change cellspacing and cellpadding in your TABLEs.

I will point out one thing in your original and following posts. No one hear is under any obligation to help you out, or to test their code before they post it. Neither are the people here working for the W3c that we would be the end all fount of knowledge regarding CSS. Please bear that in mind before you get a little snippy with our members.

I hope you can figure it out and don't give up on this forum either.

**fillup07** · Sep 30, 2002 14:27

Alright, thanks a lot.

I know that people don't have to answer here... and that people don't know everything. I am a frequent poster in the ASP forums, both asking and helping others. I only asked people to test the code first because I had seen a lot of pages about this through searching google, but none worked.

Thanks guys...

**creole** · Sep 30, 2002 15:28

I wasn't trying to discourage you. I also agree that people should test their code. What's the point if you don't right? If you;re taking the time to answer then at least try to make your answer "the" answer.

**xhtmlcoder** · Oct 3, 2002 03:04

Basically I see one of your main problems is likely to be that you using the Micro$oft browser typically: table, tr, td {border-spacing 0px;} would produce an almost exact replica in a browser like Mozilla 1.0.

However, you have to ask yourself why are you using <table> for a vertical menu bar and require its styling via CSS... It seems like a misuse of the <table> element; when well written CSS without the <table> element could have produced better results in a fully CSS-2 compliant browser.

**fillup07** · Oct 3, 2002 03:24

Originally posted by xhtmlcoder
Basically I see one of your main problems is likely to be that you using the Micro$oft browser typically: table, tr, td {border-spacing 0px;} would produce an almost exact replica in a browser like Mozilla 1.0.

However, you have to ask yourself why are you using <table> for a vertical menu bar and require its styling via CSS... It seems like a misuse of the <table> element; when well written CSS without the <table> element could have produced better results in a fully CSS-2 compliant browser.

Like what?? I've never made stuff like that without tables...

**xhtmlcoder** · Oct 3, 2002 04:25

That's fair enough, I was just trying to get across it is possible to have something similar using CSS without any tables; that is assuming the browser interprets the CSS correctly...

I don't know if your browser is up to the task but if you look here at one of my friend's sites: http://www.rickbull.co.uk/ you'll see a CSS menu without the use of any <table> elements, yes the menu is different but you should be able to now understand what I meant.

**mmi** · Oct 3, 2002 07:20

DIV?

**iTec** · Oct 3, 2002 07:56

*itec bounces into discussion*

*drops a note with some css*

Code:

<style>
.menutable {BORDER: #6699cc 1px solid; width: 150px;}
.menuheadingrow {
	background-color: #6699CC;
	color: #000000;
	text-decoration: none;
}
.menuitem {
	color: #000000;
	text-decoration: none;
	BORDER-RIGHT: #cccccc 1px solid;
	BORDER-LEFT: #f7f7f7 1px solid;
	BORDER-BOTTOM: #cccccc 1px solid;
	BORDER-TOP: #f7f7f7 1px solid;
	background-color: #E2E2E2;
}
</style>

*adds a sprinkling of html*

Code:

<div class="menutable">
	<div class="menuheadingrow">Menu Heading</div>
	<div class="menuitem">Item 1</div>
	<div class="menuitem">Item 1</div>
</div>

*and bounces back out again*

**xhtmlcoder** · Oct 3, 2002 11:57

Yes, the <div> "division" element is a generic style container normally considered as a block element and hence why it acts as a good vertical substitute.

Precisely said Zebedee, Boing!

**fillup07** · Oct 3, 2002 12:12

Wow, amazing

Thanks !

**fillup07** · Oct 3, 2002 14:40

Originally posted by iTec
*itec bounces into discussion*

*drops a note with some css*

Code:

<style> .menutable {BORDER: #6699cc 1px solid; width: 150px;} .menuheadingrow { background-color: #6699CC; color: #000000; text-decoration: none; } .menuitem { color: #000000; text-decoration: none; BORDER-RIGHT: #cccccc 1px solid; BORDER-LEFT: #f7f7f7 1px solid; BORDER-BOTTOM: #cccccc 1px solid; BORDER-TOP: #f7f7f7 1px solid; background-color: #E2E2E2; } </style>

*adds a sprinkling of html*

Code:

<div class="menutable"> <div class="menuheadingrow">Menu Heading</div> <div class="menuitem">Item 1</div> <div class="menuitem">Item 1</div> </div>

*and bounces back out again*

Would a .menuheading:hover work so that I could change the color when the mouse is over? If not, what should I use to achieve that effect?

**xhtmlcoder** · Oct 4, 2002 04:35

It depends upon what actually you want to change colour I presume you'd like to get both the background to and text change colour.

Well, there are several ways this could be achieved, but let us assume you only want the 'cell row', which contains the word "Menu Heading" to change colour then you, could add the following:

Code:

.menuheadingrow A:hover {
 background-color : silver; 
 color : white; 
 text-decoration : none;
 width : 100%;
} 
a {
 text-decoration: none;
 color: black;
}

/* Add the above CSS lines  to iTec's example */

Then you could rewrite the hypertext similar to this:

Code:

<div class="menutable">
 <div class="menuheadingrow"><a href="#">Menu Heading</a></div>
 <div class="menuitem">Item 1</div>
 <div class="menuitem">Item 2</div>
</div>

The result should be the "Menu Heading" text will turn white and the background 'cell row' colour will turn silver. Without a doubt the syntax I've just there is very ragged and poorly written but it should achieve the required results.

**sowen** · Oct 4, 2002 05:33

This weeks alist apart covers CSS menus http://www.alistapart.com/stories/taminglists/ it covers it all.

User Tag List

Thread: CSS & Table Spacing And Padding - Just Can't Get It To Work!

Thread Tools

Display

CSS & Table Spacing And Padding - Just Can't Get It To Work!

Bookmarks

Bookmarks

Posting Permissions