5 replies [Last post]
rcull
rcull's picture
Offline
newbie
Creston, B.C.
Last seen: 6 years 36 weeks ago
Creston, B.C.
Timezone: GMT-7
Joined: 2015-01-14
Posts: 3
Points: 4

I have a sample called error.php which can be found here: http://www.teambuick.com/error.php .

It has a set of tables within tables, each with it's own "class". The outer most 'class="alt3"' seems to override the inner tables 'class="tfoot"'.

Why would it do that and how can I change or avoid it?

Thanks

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 30 weeks 9 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Cannot replicate

Can you be specific about which properties are being overridden? I'm finding conflicts being handled properly.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

rcull
rcull's picture
Offline
newbie
Creston, B.C.
Last seen: 6 years 36 weeks ago
Creston, B.C.
Timezone: GMT-7
Joined: 2015-01-14
Posts: 3
Points: 4

The links in the table,

The links in the table, 'class="tfoot"' are using (inheriting?) the color scheme from the table 'alt="3"'.
tfoot links should hover in light blue, not dark blue - should be yellow, not dark gray, etc.

The code is borrowed, and I am modifying it for my purpose. The 'class="tfoot"' does use the correct background and font color.

Thanks for looking!

jackR
jackR's picture
Offline
Regular
Denver
Last seen: 6 years 9 weeks ago
Denver
Timezone: GMT-6
Joined: 2009-04-13
Posts: 44
Points: 46

No specific enough

The problem you have is that the class alt3 is the parent containing div and the styling you are using is too generic to overwrite the parent style. For example you use:

.tfoot a:hover {
color: #FFFF00;
}

to be more specific you could code it like this:

.alt3 .tfoot a {
color: #FFFF00;
}

Be more specific in your pathing to override parent styles.

Hope that helps.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 30 weeks 9 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Specificity

You have this:

.tfoot a:link, .alt1_alink, .alt1Active a:link, .alt1Active_alink {
  color: #ffff33;
}
which does as you want.

However, you also have this:

.alt3 a:link, .alt2_alink, .alt2Active a:link, .alt2Active_alink {
  color: #666666;
}
which also applies with the same degree of specificity. See ยง9. Calculating a selector's specificity.

Since it appears after the ".tfoot a:link" rule in the css, it overwrites it.

A quick and dirty fix is to increase the .tfoot specificity by prepending an additional selector.

table.tfoot a:link, .alt1_alink, .alt1Active a:link, .alt1Active_alink {
  color: #ffff33;
}

Look for a similar conflict for the a:hover selector.

cheers,

gary

//edit: Oops. Looks like Jack beat me to the punch. What I get for not refreshing after being away. ~g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

rcull
rcull's picture
Offline
newbie
Creston, B.C.
Last seen: 6 years 36 weeks ago
Creston, B.C.
Timezone: GMT-7
Joined: 2015-01-14
Posts: 3
Points: 4

Thank you, I begin to

Thank you, I begin to understand, now I will work on it!