Wh wont this class work?

[gregaryb]

<table class="CartDetailsTable"> <tr><th width="33%"><b>Photo</b></th><th width="33%"><b>Description</b></th><th width="10%"><b>Price</b></th><th width="15%"><b>Quantity</b></th><th><b>Sub-totals</b></th></tr>

</table>

 

.ClientDetailsTable{ background-color:#C0C0C0; width:99%; border:thin black solid; border-radius:5px; }; .CartDetailsTable{ background-color:#C0C0C0; width:99%; border:thin black solid; margin-left:10px; border-radius:5px; }; class ClientDetailsTable works quite happily on another table but class CartDetailsTable wont work on the above table. I can however apply class ClientDetailsTable to the above table and it works happily.

 

If I swap the position of the two classes so that CartDetailsTable is the first one then it works while class ClientDetailsTable stops working.

 

What the bloody ###### is going on here????????

 

Is there some bizarre rule with CSS class naming that I don't know about?

Edited June 27, 2014 by gregaryb

[Day]

Are any of the styles working? Is the table nested inside another element that could be overiding the class styles?

[dsonesuk]

validation error '};'

 

probably gets past the first, but semi colon causes the other one to fail.

Edited June 27, 2014 by dsonesuk

[gregaryb]

Are any of the styles working? Is the table nested inside another element that could be overiding the class styles?

What you see is what you get. I have not applied styles to the table other than through the classes.

 

I suspect I would be better off doing this with divs rather than tables. There seems like there is too much 'baggage' that comes with tables that seems to stuff things up unexpectedly.

[dsonesuk]

BAD

 

.ClientDetailsTable{ background-color:#C0C0C0; width:99%; border:thin black solid; border-radius:5px; }; .CartDetailsTable{ background-color:#C0C0C0; width:99%; border:thin black solid; margin-left:10px; border-radius:5px; };

 

GOOD.

 

.ClientDetailsTable{ background-color:#C0C0C0; width:99%; border:thin black solid; border-radius:5px; } .CartDetailsTable{ background-color:#C0C0C0; width:99%; border:thin black solid; margin-left:10px; border-radius:5px; }