CSS eigenschappen worden niet overschreven

[Verwijderd]

Hier op stage hebben we een probleem met eerst een td element een standaard kleur mee te geven, en vervolgens de kleur van td's in een tabel met een specifieke class te wijzigen.
We hebben de volgende opzet (abstract):

HTML:

<table class="window">
    <tr>
        <td>
            <table>
                <td>Deze heeft de standaard definitie</td>
            </table>
        </td>
    </tr>
</table>
<table class="window">
    <tr>
        <td>
            <table class="bla">
                <td>Deze moet overschreven worden</td>
            </table>
        </td>
    </tr>
</table>

Vervolgens de css:

Cascading Stylesheet:

table.window table td 
{
    color : black;
}
.list td
{
    color : green;
}

Het probleem is nu dat de td in de table met class 'list' niet groen wordt, maar gewoon de zwarte kleur pakt. Pas wanneer we de class aanspreken met

Cascading Stylesheet:

table.window .list td

wordt de kleur goed overgenomen. Dit is echt vrij beperkend, terwijl we juist een zo breed mogelijk bruikbare stylesheet willen. Waarom krijgt de .list td niet gewoon de groene kleur, zoals je zou verwachten met deze volgorde?

Test url

offtopic:
(Ik hoop dat het verkeerd gebruik van tabellen dit keer niet ter sprake hoeft te komen, ik weet dat het beter (semantisch correct) kan, de ontwerper weet dat het beter kan, maar onze werkgever wil dat deze techniek voorlopig nog wordt gebruikt omdat hij niet vertrouwd dat wij anders een betrouwbare consistente layout kunnen leveren in de korte tijd die we hebben, dit is alles wat ik erover wens te bespreken).

[crisp]

omdat 'table.window table td' specifieker is dan '.list td'
zie http://www.w3.org/TR/CSS21/cascade.html#specificity

[Verwijderd]

Ah kijk aan , zeer interessant, had er nog nooit van gehoord. Helaas is het in het geval van nested tables wel erg vervelend..

[moozzuzz]

Je kan de .list belangrijker maken door deze te prependen met html body.

[kennycos]

let op met html> body, IE en FF kunnen verschillende dingen doen (wanneer niet....)

[Verwijderd]

Je vergeet ook de tr's binnen de table:

PHP:

<table class="bla">
 <td>Deze moet overschreven worden</td>
</table>

[Rekcor]

Verwijderd schreef op zaterdag 11 november 2006 @ 10:34:
Je vergeet ook de tr's binnen de table:

PHP:

<table class="bla">
 <td>Deze moet overschreven worden</td>
</table>

Idd, het beste kun je je HTML en CSS eerst es laten validaten (http://validator.w3.org/ resp. http://jigsaw.w3.org/css-validator/validator-uri.html), alvorens aan DOM-debugging te doen. Scheelt een hoop koppijn en hoofdbrekens (kan ik je uit ervaring zeggen)

[ Voor 6% gewijzigd door Rekcor op 11-11-2006 10:50 ]

[Pkunk]

Je zou zelfs nog

code:

color:green !important;

kunnen gebruiken als de nood hoog is

[ Voor 7% gewijzigd door Pkunk op 11-11-2006 10:53 ]

[JHS]

Verwijderd schreef op zaterdag 11 november 2006 @ 10:34:
[php] (...) [/php]

Er is ook speciale HTML highlighter, met behulp van [code=html] (...) [/code] .