using a div to style td, th, tr

Im doing something stupid Im sure

[bruisedghost]

Hi all,

I have a bit of code thats driving me nuts.

<center><table id="menus1"><tr>
<td><a href="images/photo/bar1.gif" rel="lightbox" title="my caption"> <img src="images/photo/thumbs/thumb1.gif"></a></td>
<td><a href="images/photo/bar2.gif" rel="lightbox" title="my caption"> <img src="images/photo/thumbs/thumb.gif"></a></td>
<td><a href="images/photo/bar3.gif" rel="lightbox" title="my caption"> <img src="images/photo/thumbs/thumb3.gif"></a></td>
</tr></table></center>

with the following CSS

#menus1 tr, th, td {
padding:1em;
line-height: 0;

the issue that I am having is that for some reason that line of CSS seems to be styling my entire document whenever a tr, td, th tag is called.

Im sure Im doing something stupid, can anyone help out?

Thanks in advance!

[Fotiman]

Welcome to WebmasterWorld! Your CSS is essentially the equivalent of this:

#menus1 tr {...}
th {...}
td {...}

You just need more specificity:

#menus1 tr,  
#menus1 th, 
#menus1 td {  
  padding:1em;  
  line-height: 0; 
} 

[bruisedghost]

never mind I solved it, I should have been using table class not id

[Fotiman]

Based on the code you provide above, changing from an id to a class is totally irrelevant. The problem, as I explained, was that you were not using the correct specificity for the th and td items.

[swa66]

As Fotiman said:

#menus1 tr, th, td

means all <tr> inside anything with an id="menus1"
and all <th> anywhere
and all <td> anywhere

What you probably meant is:

#menus1 tr, #menus1 th, #menus1 td

which means:
- all <tr> inside anything with an id="menus1"
- all <th> inside anything with an id="menus1"
- all <td> inside anything with an id="menus1"

I usually do not try to style a <tr>: there is little need if you have control over the <th> and <td>

And finally <center>: isn;t that long since declared obsolete ? Set a width on your table and give it auto margins using CSS instead of using that tag.

Similarly, most out here would frown on using a table for layout purposes: if it's a list then many would use a <ul> ... and style it all using CSS.