table row top/bottom borders won't take -- feeling really lame right now, lol.

[mtouchette]

okay y'all, i pretty much know this, or t least i think i do. but it just won't take effect.

here is my (current) CSS:

.odd {background-color:#fff9ed; border-top:1px solid #eee; border-bottom:1px solid #eee;}
table#webCompare.thVertical {border-right: 1px solid #eee;}
table#webCompare.thHorizontal {border-bottom: 1px solid #eee;}

i've tried it several ways, including table.thVertical and .thVertical. at one point the right border did show up, but it was senseless without the horizontal borders so i'mjust going with odd/even row background colors for now.

it also works if i give the entire table a border but that's just, well, ugly.

the CSS is among the last declarations on the stylesheet, so I don't think it is being overridden by something later in the cascade.

so please, everyone enjoy a hearty laugh (with me), and then tell me what obvious thing i should know if i don't already i am missing. :-)

thanks!

[ralph.m]

We'd need to see your HTML to know if you are targeting the right elements or not. What are you actually trying to do?

[mtouchette]

<table width="100%" border="0" cellpadding="4" cellspacing="0" bordercolor="#FFFFFF" id="webCompare">
<tr valign="bottom" class="thHorizontal">
    <th class="thVertical" scope="col"></th>
<th align="left" scope="col">1<br /></th>
        <th align="left" scope="col">2</th>
        <th align="left" scope="col">3</th>
        <th align="left" scope="col">4</th>
        <th align="left" scope="col">5</th>
        <th align="left" scope="col">6</th>
      </tr>
      <tr class="odd">
        <th align="right" valign="top" class="thVertical" scope="row">A&nbsp;</th>
        <td align="left" valign="top">Yes</td>
        <td align="left" valign="top">Yes</td>
        <td align="left" valign="top">Yes</td>
        <td align="left" valign="top">Yes</td>
        <td align="left" valign="top">Yes</td>
        <td align="left" valign="top">Yes</td>
      </tr>
      <tr>
        <th align="right" valign="top" class="thVertical" scope="row">B&nbsp;</th>
        <td align="left" valign="top">Yes</td>
        <td align="left" valign="top">Yes</td>
        <td align="left" valign="top">Yes</td>
        <td align="left" valign="top">Yes</td>
        <td align="left" valign="top">Yes/td>
        <td align="left" valign="top">Yes</td>
      </tr>
      <tr class="odd">
        <th align="right" valign="top" class="thVertical" scope="row">C&nbsp;</th>
        <td align="left" valign="top">UYes/td>
        <td align="left" valign="top">Yes</td>
        <td align="left" valign="top">UYes/td>
        <td align="left" valign="top">Yes</td>
        <td align="left" valign="top">Yes/td>
        <td align="left" valign="top">Yes</td>
      </tr>
      <tr>
        <th align="right" valign="top" class="thVertical" scope="row">D&nbsp;</th>
        <td align="left" valign="top">Yes</td>
        <td align="left" valign="top">Yes</td>
        <td align="left" valign="top">Yes</td>
        <td align="left" valign="top">Yes</td>
        <td align="left" valign="top">Yes</td>
        <td align="left" valign="top">Yes</td>
      </tr>
      <tr class="odd">
        <th align="right" valign="top" class="thVertical" scope="row">E&nbsp;</th>
        <td align="left" valign="top">Yes</td>
        <td align="left" valign="top">Yes</td>
        <td align="left" valign="top">Yes</td>
        <td align="left" valign="top">Yes</td>
        <td align="left" valign="top">Yes</td>
        <td align="left" valign="top">Yes</td>
      </tr>
</table>

[ralph.m]

Because the class and id are not on the same element, you need a space between them:

table#webCompare .thVertical {border-right: 1px solid #eee;}
table#webCompare .thHorizontal th {border-bottom: 1px solid #eee;}

In the second line I added th to make the bottom border work.

[mtouchette]

thanks!

that gave me the th borders i wanted, and--after some trial and error--i was able to get top and bottom borders on my odd rows. turns out i had to use td rather than tr. (which is why i prefer using cell padding over cell spacing.)

and, i learned some new stuff! :-)

[ralph.m]

Cool, glad that helped.