css problem

[micky]

##########################################################
i use css [board-frame] like this

#####################################################
<!-- FrameTable -->
<table border="0" cellpadding="0" cellspacing="0"
class="board-frame">
<tr>
<td class="topx--"></td>
<td class="top-x-"></td>
<td class="top--x"></td>
</tr>
<tr>
<td class="midx--"></td>
<td class="board-framebg">
<!-- Content -->



<!-- //Content -->
</td>
<td class="mid--x"></td>
</tr>
<tr>
<td class="botx--"></td>
<td class="bot-x-"></td>
<td class="bot--x"></td>
</tr>
</table>

############# css is like this #######################################
/* BoardFrame */
..board-framebg {
background-image: url(Images/Frame/board-back.gif);
background-repeat: repeat;
width: 100%;
}

..board-frame {
width: 95%;
height: auto;
vertical-align: top;
table-layout:fixed;
margin:0 auto
}

..board-frame .topx-- {
background-image: url(Images/Frame/board-topx--.gif);
background-repeat: no-repeat;
vertical-align: top;
}
..board-frame .top-x- {
background-image: url(Images/Frame/board-top-x-.gif);
background-repeat: repeat-x;
}
..board-frame .top--x {
background-image: url(Images/Frame/board-top--x.gif);
background-repeat: no-repeat;
vertical-align: top;
}

##########################################################

my qustion is when it contain another css frame [boardContent-frame] like
below
it also contain topx--,top-x- and so on
it applied css of board-frame, not boardContent-frame
how should i solve it??

#############################################################

<!-- FrameTable -->
<table border="0" cellpadding="0" cellspacing="0"
class="board-frame">
<tr>
<td class="topx--"></td>
<td class="top-x-"></td>
<td class="top--x"></td>
</tr>
<tr>
<td class="midx--"></td>
<td class="board-framebg">
<!-- Content -->

<!-- FrameTable -->
<table border="0" cellpadding="0" cellspacing="0"
class="boardContent-frame">
<tr>
<td class="topx--"></td> ####### this part apply
board-frame.topx--
<td class="top-x-"></td> ###### this part apply
board-frame.top-x-
<td class="top--x"></td> ####### this part apply
board-frame.top--x
</tr>
<tr>
<td class="midx--"></td>
<td class="board-framebg">
<!-- Content -->

<!-- //Content -->
</td>
<td class="mid--x"></td>
</tr>
<tr>
<td class="botx--"></td>
<td class="bot-x-"></td>
<td class="bot--x"></td>
</tr>
</table>


<!-- //Content -->
</td>
<td class="mid--x"></td>
</tr>
<tr>
<td class="botx--"></td>
<td class="bot-x-"></td>
<td class="bot--x"></td>
</tr>
</table>

 

[Ryan Ternier]

First off I would recommend not using table based layouts.

Are these tables nested? I can't tell from the code you put in, if they are
that is why you're getting those issues.