**SOLVED** OO style CSS ?

[anatak]

Hello,

This is probably a real stupid question.
first I am realy not good at CSS as it is a bit confusing for me.

I was wondering if it is possible to have some sort of inheritence in CSS.
say you want all your cells of your tables to have no borders.

you have a table with three rows (left , center, right)

you want all your cells to have no borders
td.noborder
{
  border: none;
}

but then you want
the cells on the left to allign left
the cells in the center to allign center
the cells in the right to allign right.

is there a way to "inherit" the no border ?
or do you have to declare everything separatly ?

I hope I made myself clear.
thank you
anatak

[ToonMariner]

Yes that is the cascade....

<table>
<tr>
  <td class="left"></td>
  <td></td>
  <td class="right"></td>
<tr>
</table>

td {
border: none;
text-align: center;
}

.left {
text-align: left;
}

.right {
text-align: right;
}

[anatak]

thanks
this is what I was looking for

sorry for the late reply

[anatak]

does anybody sees what is wrong with this ?

In IE everything is displayed as intended
in firefox I can not get the frame table to centre the index table

[code]
<table border="0" cellpadding="0" cellspacing="0" class="frame">
<tr><td class="frame"><h1>title</h1><br /><img src="http://forum.pbase.com/templates/pbase/images/lang_english/icon_profile.gif" />
</td></tr>
<tr><td class="frame">
<table border="0" cellpadding="0" cellspacing="0" class="index">


<tr><td class="index_top_left">top left</td>
<td class="index_top_center">top center</td>
<td class="index_top_right">top right</td></tr>

<tr><td class="index_center_left">center left</td>
<td class="index_center_center">center center</td>
<td class="index_center_right">center right</td></tr>

<tr><td class="index_bottom">bottom left</td>
<td class="index_bottom">bottom center</td>
<td class="index_bottom">bottom right</td></tr>

</table>
</td></tr>
</table>
[/code]

here is the css part with the tables
[code]
/*tekst opmaak*/
/*hex color 112233 11=RED 22=GREEN 33=BLUE*/
body {
background-color: #CCCCFF;
color: #000000;
font-size: 12pt;
}
/*table layout */


/*frame table layout (to center everything) */
table {
border: 0px none #00EEEE;
border-spacing: 0px;
text-align: center;
}

.frame {
width: 100%;
padding: 0px;
background-color: #EEEEEE; /*background-color*/
}

/*index page table opmaak*/
.index {
width: 800px;
padding: 0px;
background-color: #EEEEEE;
}

/*navigation table*/
.nav {
width: 100%;
padding: 2px;
background-color: #8888FF;
}

/*login password resend table opmaak*/
.log {
width: 150px;
padding: 0px;
background-color: #000000;
}

td {
border: 0px none #FFFFFF; /*border style thickness color*/
text-align: center;
font-size: 12pt; /*font-size*/
}

/*frame is the table that holds everything in 1 cel*/
.frame {
padding: 0px;
vertical-align: middle;
color: #EEEEEE; /*text color*/
background-color: #EEEEEE;  /*background-color*/
}

.index_top_left {
padding: 0px;
width: 150px;
height: 200px;
vertical-align: middle;
color: #000000;
background-color: #AAAAFF;
}

.index_top_center {
padding: 0px;
width: 500px;
height: 200px;
color: #000000;
background-color: #AAAAFF;
font-size: 20pt;
}

.index_top_right {
padding: 0px;
width: 150px;
height: 200px;
vertical-align: middle;
color: #000000;
background-color: #AAAAFF;
}

.index_center_left {
padding: 0px;
width: 150px;
color: #000000;
background-color: #CCCCFF;
}

.index_center_center {
padding: 0px;
width: 500px;
background-color: #EEEEEE;
color: #000000;
}

.index_center_right {
padding: 0px;
width: 150px;
background-color: #CCCCFF;
color: #000000;
}

.index_bottom {
padding: 0px;
color: #000000;
background-color: #AAAAFF;
}
[/code]

The thing I don't understand is that text is centered without problems but HTML tags not
for example if I put an extra row on top of the index table It centers the text and images.
when I put a table in there it puts the table to the left ???
Is there some workaround to center a table within a table in firefox ?

[anatak]

hmm putting in
margin: 0 auto;
solved the problem