OT: a bit cheeky..

[Regan Heath]

This is a bit cheeky but I was wondering if either of you have a solution  
to a problem I am having... (Feel free to ignore this post if you don't  
have the time or inclination, I won't mind, any help I get is a bonus)

The problem is this. We have an old set of pages, using html, using  
tables. The objective is to remove the html formatting and produce CSS  
that causes the pages to display exactly as they currently do. Thus far I  
have removed all the border="0" etc from the tables and other elements and  
added class="x" where I need to add formatting etc.

This all worked wonderfully except in one case:

//css file
table {
}

table.visible {
   background-color: ..etc..
   border: ..etc..
}

table.visible > tbody > tr > td {
   border: ..etc..
}

//html file
<table>
   <tr>
     <td><table class="visible">
       <tr>
         <td>A</td>
       </tr>
     </td>
   </tr>
</table>

As you probably know IE does not support the child selector ">", so, the  
rules to add borders to the internal table cells do not apply in IE, but  
do apply in opera, mozilla, etc. Further, if you use the descendant  
selector (a space) then they apply where they shouldn't in the reverse  
case (normal table inside table.visible) eg.

//CSS file
table.visible td {
   border: ..etc..
}

//HTML file
<table class="visible">
   <tr>
     <td><table>
       <tr>
         <td>A</td>
       </tr>
     </td>
   </tr>
</table>

I know the general consensus is that we shoudn't be using tables, and for  
new pages we don't. In this case we just want to be able to apply  
different styling to one old set of pages (without making too many changes  
to them) if coming to them from different locations.

Adding class="visible" to all the tr, td and th's seems heavy handed to me.

Any ideas?

Regan