Problem nesting formatting

liunx

Guest
Hello everyone!
I have several text inside a table (table name is inside) which is inside another table called outside. I want to add a class call "festivo" and "marcado" inside those tables to format some text, but nothing works.
Also, the first TR ("cabecera") of the table I would like it to have a special bkg color, but it laughs in front of my face.
I need to give it a lesson, any hints?

<style>
body {font: 12px Verdana;}

table.outside {
font: 10px Verdana;
color:orange;
text-align:center;
border-width: 1px;
border-spacing: ;
border-style: dashed;
border-color: black;
border-collapse: collapse;
background-color: #fffff0;
}
tr.cabecera{
background-color: #333333;
}
table.outside th {
border-width: 1px;
padding: 1px;
border-style: dotted;
border-color: gray;
background-color: #fffff0;
-moz-border-radius: ;
}
table.outside td {
border-width: 1px;
padding: 1px;
border-style: dotted;
border-color: gray;
background-color: #fffff0;
-moz-border-radius: ;
}
table.inside {
font: 9px Verdana;
color:black;
border-width: 0px;
border-spacing: ;
border-style: dashed;
border-color: gray;
border-collapse: collapse;
background-color: white;
}
table.inside th {
border-width: 0px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
-moz-border-radius: ;
}
table.inside td {
border-width: 0px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
-moz-border-radius: ;
}
a {text-decoration:none;color:orange;}
a.marcado {background-color:green;}
a.festivo {color:#B00000;}
a.opc{color:gray;font-weight:bold;}
</style>Originally posted by Perfidus
I want to add a class call "festivo" and "marcado" inside those tables to format some text, but nothing works.

Make sure you add your classes:


<td class="festivo"> ... </td>
<td class="marcado"> ... </td>


Then make sure you refer to them properly in the CSS:


td.festivo {
color: red;
}
td.marcado {
color: green;
}


Originally posted by Perfidus
Also, the first TR ("cabecera") of the table I would like it to have a special bkg color, but it laughs in front of my face.

Make sure you'v given the first TR the right ID.


<tr id="cabecera">
...
</tr>


Then make sure you refer to it properly in the CSS:


#cabecera {
color: black;
background: deeppink;
}Everything worked out pretty well but the cell bkg color.
I get the text changed to black, but not the cell bkg...
<style>
body {font: 12px Verdana;}

table.sample {
font: 10px Verdana;
color:orange;
text-align:center;
border-width: 1px;
border-spacing: ;
border-style: dashed;
border-color: black;
border-collapse: collapse;
background-color: #fffff0;
}
table.sample th {
border-width: 1px;
padding: 1px;
border-style: dotted;
border-color: gray;
background-color: #fffff0;
-moz-border-radius: ;
}
table.sample td {
border-width: 1px;
padding: 1px;
border-style: dotted;
border-color: gray;
background-color: #fffff0;
-moz-border-radius: ;
}
#cabecera {
color: black;
background-color: deeppink;
}
#semana {
color: black;
background-color: deeppink;
}
table.inside {
font: 9px Verdana;
color:black;
border-width: 0px;
border-spacing: ;
border-style: dashed;
border-color: gray;
border-collapse: collapse;
background-color: white;
}
table.inside th {
border-width: 0px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
-moz-border-radius: ;
}
table.inside td {
border-width: 0px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
-moz-border-radius: ;
}
td.festivo {
color: red;
}
td.marcado {
color: green;
}

a {text-decoration:none;color:orange;}

</style>It would really help if you put your code in the CODE UBB tags or something.

What does your TR look like in the HTML?Sorry for not quoting the text
:o

<TABLE CLASS="sample" BORDER='0' CELLPADDING='2' CELLSPACING='0' WIDTH='50%'>
<TR id="cabecera"><TD COLSPAN='7'>Text</TD></TR>
<TR id="semana">
<TD>text1</TD>
<TD>text2</TD>
<TD>text3</TD>
<TD>text4</TD>
</TR>Hmm, based on what I see in your CSS, everything should be working fine. You could, perhaps, give this a shot, though:


#cabecera td {
background-color: deeppink;
}Now it works like a Swiss clock, Thank You Jona!Happy to help.One thing makes me wonder, actually, both CSS class point to a TD in the script, but they are formatting a TR in the context:

#cabecera td {
background-color: deeppink;
}


They are located in a TR


<TR id="cabecera">


Is it normal, what happens if I want to act only over one TD in all the TR??You are referencing all TD's that are inside the <TR id="cabecera"> with that CSS. If you remove the ID from either the HTML or the CSS, then all TD's will have a pink background.But is it possible to give pink bkg to a single cell?
I have tried locating the "id" in the TD tag, but doesn't work...What does Meyer call it? Specificity? Try setting the style for a td with that id.

td#cabecera {
background-color: deeppink;
}

But you can only have one of them in that case. If there are several then a class should be used.
 
Back
Top