Problem nesting formatting

@PerfidusApr 03.2005

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?

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>

to post a comment

CSS

11 Comments(s) _↴

@JonaApr 03.2005 — #[i]Originally posted by Perfidus[/i]

[b]I want to add a class call "festivo" and "marcado" inside those tables to format some text, but nothing works.[/b][/quote]

[font=trebuchet ms]Make sure you add your classes:[/font]

<i>
 </i>&lt;td class="festivo"&gt; ... &lt;/td&gt;
 &lt;td class="marcado"&gt; ... &lt;/td&gt;

[font=trebuchet ms]Then make sure you refer to them properly in the CSS:[/font]

<i>
 </i>td.festivo {
 color: red;
 }
 td.marcado {
 color: green;
 }

[i]Originally posted by Perfidus[/i]

[b]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.[/b][/quote]

[font=trebuchet ms]Make sure you'v given the first TR the right ID.[/font]

<i>
 </i>&lt;tr id="cabecera"&gt;
 ...
 &lt;/tr&gt;

[font=trebuchet ms]Then make sure you refer to it properly in the CSS:[/font]

<i>
 </i>#cabecera {
 color: black;
 background: deeppink;
 }

@PerfidusauthorApr 03.2005 — #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>

@JonaApr 03.2005 — #[font=trebuchet ms]It would [b]really[/b] help if you put your code in the CODE UBB tags or something.

What does your TR look like in the HTML?[/font]

@PerfidusauthorApr 03.2005 — #Sorry for not quoting the text

:o

[code=html]
 <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>
 [/code]

@JonaApr 03.2005 — #[font=trebuchet ms]Hmm, based on what I see in your CSS, everything should be working fine. You could, perhaps, give this a shot, though:[/font]

<i>
 </i>#cabecera td {
 background-color: deeppink;
 }

@PerfidusauthorApr 03.2005 — #Now it works like a Swiss clock, Thank You Jona!

@JonaApr 03.2005 — #[font=trebuchet ms]Happy to help.[/font]

@PerfidusauthorApr 03.2005 — #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:

[code=html]
 #cabecera td {
 background-color: deeppink;
 }
 [/code]

They are located in a TR

[code=html]
 <TR id="cabecera">
 [/code]

Is it normal, what happens if I want to act only over one TD in all the TR??

@JonaApr 03.2005 — #[font=trebuchet ms]You are referencing all TD's that are [i]inside[/i] 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.[/font]

@PerfidusauthorApr 03.2005 — #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...

@ray326Apr 03.2005 — #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.

Also in #CSS _↴

Vertically aligning website containing absolute positioned elements [RESOLVED] gradient syntax issue?IE Prob (99% of my posts are about IE :@ )

Success!

Help @Perfidus spread the word by sharing this article on Twitter...

Tweet This

Problem nesting formatting

11 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Problem nesting formatting

11 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #CSS _↴