Can't override CSS class!!!

J

Jibba Jabba

I have created a custom CSS class, which specifies a certain link color. I
then placed it in a "td".

After the above td, I created another table nested inside. In the inside
table I tried to override the top one's link color attribute. However it's
just not working. Does anyone know how I can override a css class?
 
E

Els

Jibba said:
I have created a custom CSS class, which specifies a certain link color. I
then placed it in a "td".

After the above td, I created another table nested inside. In the inside
table I tried to override the top one's link color attribute. However it's
just not working. Does anyone know how I can override a css class?

Did you put table table td a:link{} or td table td a:link{}?
Or even table td table td a:link{}?

Difficult to see what's wrong, without seeing the code :)
 
P

Paul Furman

Jibba said:
I have created a custom CSS class, which specifies a certain link color. I
then placed it in a "td".

After the above td, I created another table nested inside. In the inside
table I tried to override the top one's link color attribute. However it's
just not working. Does anyone know how I can override a css class?

I just got this working:

a {text-decoration: none; font-weight: bold;}
a:link {color: #333399;}/*#6633CC*/
a:visited {color: #9B4457;}
a:hover {color: #339966;}
a:active {color: red;}

a.hidden {text-decoration: none; font-weight: normal;}
a.hidden:link {color: #444444;}
a.hidden:visited {color: #444444;}
a.hidden:hover {color: #339966;}
a.hidden:active {color: #444444;}

/* note: #444444 is a dark grey/black */

<a href="http://" class="hidden">
only turns a color when hovering

<a href="http://">
follows the top global rule
 
J

Jibba Jabba

Difficult to see what's wrong, without seeing the code :)

Ok below is the code. I finally figured out that the order of the CSS
classes mattered, but why should that be so? Try switching the CSS classes
tgroupsblack and tcat, then see how the output html completely changes. One
with white link font, and the other with black link font as it's supposed to
be.

Why is this happening? Is this normal behavior of CSS?


CODE:


<HTML>
<HEAD>




<style type="text/css">
<!--

..tgroupsblack
{
color: #000000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica,
sans-serif;
}
..tgroupsblack a:link
{
color: #000000;
text-decoration: none;
font: bold 10pt;
}
..tgroupsblack a:visited
{
color: #000000;
font: bold 10pt;
text-decoration: none;
}
..tgroupsblack a:hover, .tgroupsblack a:active
{
color: #000000;
text-decoration: underline;
}

..tcat
{
background: #9999FF;
color: #FFFFFF;
font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica,
sans-serif;
}
..tcat a:link
{
color: #FFFFFF;
text-decoration: none;
}
..tcat a:visited
{
color: #FFFFFF;
text-decoration: none;
}
..tcat a:hover, .tcat a:active
{
color: #FFFF66;
text-decoration: underline;
}

-->
</style>




</HEAD>
<BODY>

<table cellpadding="6" cellspacing="1" border="0" width="100%">
<tbody>
<tr align="center">
<td class="tcat" align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FFFFFF" colspan="2">
<div align="right" class="tgroupsblack"><a href="link">Link
that doesnt show up</a>sdf</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>


</BODY>
</HTML>
 
D

David Dorward

Ok below is the code. I finally figured out that the order of the CSS
classes mattered, but why should that be so?

Why shouldn't it matter? How else would you resolve conflicting
instructions?
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica,

Uh Oh, using points for font sizes is a really bad idea.
http://css-discuss.incutio.com/?page=UsingPoints

.tgroupsblack a:link

A link that is a descendent of an element with class of tgroupsblack (You
should probably put some more thought into your class names. Aim to
describe the meaning, not the appearence, it will make things easier if you
decide to change the look later).
.tcat a:link

A link that is a descendent of an element with class of tcat.

<td class="tcat" align="left">
<div align="right" class="tgroupsblack"><a href="link">Link
that doesnt show up</a>sdf</div>

This link is a descendent of an element with class 'tcat', but is is also a
descendent of class 'tgroupsblack'.

Each instruction is equally specific.

What should it do when the instructions conflict?

It takes the newest (i.e. last) matching instruction.
 
J

Jibba Jabba

This link is a descendent of an element with class 'tcat', but is is also a
descendent of class 'tgroupsblack'.

Each instruction is equally specific.

I'd always thought that CSS takes the nearest instructions when encountering
conflicts, but I guess it does it by order first.

Btw, thanks for your various tips. Will be looking into my code more
closely.
 
R

Richard

Jibba said:
I have created a custom CSS class, which specifies a certain link color.
I then placed it in a "td".
After the above td, I created another table nested inside. In the inside
table I tried to override the top one's link color attribute. However
it's just not working. Does anyone know how I can override a css class?


alt.binaries.html is now available for posting working code examples.
If your service does not carry it, ask them to.
 
A

Andrew Glasgow

This link is a descendent of an element with class 'tcat', but is is also a
descendent of class 'tgroupsblack'.

Each instruction is equally specific.

I'd always thought that CSS takes the nearest instructions when encountering
conflicts, but I guess it does it by order first.[/QUOTE]

What do you mean by 'nearest'?
 
J

Jibba Jabba

What do you mean by 'nearest'?

Nearest as in, the closest CSS class to the link in question, meaning if
there were one class set for a TD but then there was a DIV declaring another
class, the one in the DIV would take precedence since it was immedate to the
text in question.

For example:

<td class=A>
<div class=B>some text</div>
</td>


Shouldn't B override A?
 
M

Mark Parnell

<td class=A>
<div class=B>some text</div>
</td>

Shouldn't B override A?

That depends on your CSS file. Which is defined last? See my reply to
you in your latest thread ("CSS Problem").
 
A

Andrew Glasgow

What do you mean by 'nearest'?

Nearest as in, the closest CSS class to the link in question, meaning if
there were one class set for a TD but then there was a DIV declaring another
class, the one in the DIV would take precedence since it was immedate to the
text in question.

For example:

<td class=A>
<div class=B>some text</div>
</td>


Shouldn't B override A?
[/QUOTE]
 
Joined
Sep 30, 2007
Messages
1
Reaction score
0
> Ok below is the code. I finally figured out that the order of the CSS
> classes mattered, but why should that be so?

Why shouldn't it matter? How else would you resolve conflicting
instructions?

I'm curious when conflicting instructions would ever arise in CSS / html.
I thought css always took the closest tag.

For example:
HTML:
<style>
#mydiv {color: #ffffff}
body {color: #000000}
</style>

<body>
<div id="mydiv">bla bla bla</div>
</body>
Obviously, in this case, "bla bla bla" will be white even though the body tag says that all text should be black. Isn't this how it is always supposed to work?

I'm not questioning your knowledge, I'm just trying to understand css better as I'm in that "know just enough to be dangerous" phase.

Brandon
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top