[css] class.class geeft problemen in Firefox

[Verwijderd]

ik zit met een klein probleempje met betrekking tot het aanroepen van een juiste style, in Firefox wel te verstaan. Doordat ik in eerste instantie te lang alleen maar heb getest in IE loop ik nu tegen dit probleem aan en weet ik niet hoe dit op te lossen. Na wat zoeken leek het me om eens naar de pseudo classes van css te kijken en de selectors.

Echter kon ik hier niet het gewenste resultaat vinden. Wat is mijn probleem. Ik heb een tabel met daarin headlines, deze tabel bevat verschillende cellen: minimaal drie. Nu moeten er voor de eerste en de laatste cel telkens een andere style worden aangeroepen dan voor de middelste.

Hierbij heb ik onderstaande html + css gebruikt, welke tot een perfect resultaat in IE leiden. Dezelfde code in Firefox laat wel de inhoud zien, maar geen border-bottom, die pas gedefinieerd staat in de tweede style van headlines...

De tabel heeft de style .headlines mee gekregen.
Iedere td krijgt dan .headlines.tdnaam bijvoorbeeld.

FireFox snapt dit echter niet.

code:

.headline {
        font-family:arial, helvetica, sans-serif;
        font-size:8pt;
        color:#000000;
        line-height:1.7;
        }

        .headline.tdfirst { padding-right:2px; text-align:left; border-bottom:1px solid #E8E8E8; }
        .headline.tdtwothree { padding-left:3px; padding-right:2px; text-align:left; border-bottom:1px solid #E8E8E8; }
        .headline.tdextrafirst { padding-left:3px; padding-right:2px; text-align:left; border-bottom:1px solid #E8E8E8; }
        .headline.tdextralast { padding-left:2px; padding-right:2px; text-align:right; border-bottom:1px solid #E8E8E8; }
        .headline.tdlast { padding-left:3px; text-align:right; border-bottom:1px solid #E8E8E8; }
        .headline a:link { color:#000000; text-decoration:none; }
        .headline a:visited { color:#000000; text-decoration:none; }
        .headline a:active { color:#000000; text-decoration:none; }
        .headline a:hover { color:#C0231A; text-decoration:none; }

code:

<table width="358" cellspacing="0" cellpadding="0" border="0" class="headline">
<tr>
<td class="tdfirst" valign="middle">aaa</td>
<td class="tdextrafirst">bbb</td>
<td class="tdextralast">ccc</td>
<td class="tdtwothree" valign="middle">ddd</td>
<td class="tdtwothree" valign="middle">ddd</td>
<td class="tdlast" valign="middle">eee</td>
</tr>
</table>

Waarschijnlijk ben ik hiermee veel te omslachtig bezig... In IE geeft het echter het gewenste resultaat, en daar was ik altijd van uitgegaan...zonder enig idee hebbend dat het op een andere manier wel veel makkelijker zou kunnen zijn. Hoe kan ik dit oplossen zodat zowel IE als Firefox de juiste (extra) style aanroept.

[Verwijderd]

Cascading Stylesheet:

.headline .tdlast

een spatie ertussen dus, nu roep je alles aan wat beide classes heeft, en die zijn er dus niet

vergeet niet dat een spatie ook een selector is: http://www.w3.org/TR/REC-...html#descendant-selectors

[ Voor 31% gewijzigd door Verwijderd op 15-12-2004 18:04 ]

[crisp]

.headline.tdfirst slaat op een element dat beide classes heeft:

code:

class="headline tdfirst"

in jouw geval gaat het om een child van het element met class="headline" en moet je dus een spatie zetten tussen beide class-selectors:

Cascading Stylesheet:

.headline .tdfirst { }

al je andere attributen in je HTML kan je overigens ook vervangen door CSS

[Verwijderd]

Wel, het werkt nu inderdaad... hoe simpel eigenlijk.., en hoe groot het verschil tussen IE en Firefox dus.

[crisp]

Verwijderd schreef op woensdag 15 december 2004 @ 18:28:
Wel, het werkt nu inderdaad... hoe simpel eigenlijk.., en hoe groot het verschil tussen IE en Firefox dus.

IE houd zich in deze gewoon weer eens niet aan de specificaties....

[Clay]

IE is dom, en pakt met 2 classnames gewoon de laatste:

code:

<style type="text/css">
span.melp.zwik {
    color:blue;
}
</style>

<span class="zwik">
    fiets, zal in IE blauw zijn
</span>

[crisp]

zo is het nog iets duidelijker:

code:

<style type="text/css">
span.melp {
    color:red;
}
span.zwik {
    color:yellow;
}
span.melp.zwik {
    color:blue;
}
</style>

<span class="melp">
    een rode fiets
</span>
<span class="zwik">
    een gele fiets
</span>
<span class="melp zwik">
    een blauwe fiets
</span>

trouwens voor het eerst dat ik deze bug zie; dit is best ernstig naar mijn mening...

otoh kan je het natuurlijk wel weer mooi als hack misbruiken:

Cascading Stylesheet:

div.container {
  /* standard compliant style definitions */
}
div.IE-will-ignore-this.container {
  /* IE style definitions */
}

[ Voor 25% gewijzigd door crisp op 15-12-2004 23:10 ]

[Verwijderd]

Is m'n topic toch nog ergens goed voor

[crisp]

Verwijderd schreef op woensdag 15 december 2004 @ 23:08:
Is m'n topic toch nog ergens goed voor

Inderdaad

Ik vermoed trouwens dat het gewoon niet geimplementeerd is in IE. In CSS1 kan je maar 1 classname gebruiken als selector, en pas vanaf CSS2 meerdere classnames om op te matchen (maar goed, de CSS2 recommendation is ook pas 6 1/2 jaar oud...)

[Woudloper]

crisp schreef op woensdag 15 december 2004 @ 23:54:
Ik vermoed trouwens dat het gewoon niet geimplementeerd is in IE. In CSS1 kan je maar 1 classname gebruiken als selector, en pas vanaf CSS2 meerdere classnames om op te matchen (maar goed, de CSS2 recommendation is ook pas 6 1/2 jaar oud...)

De recommendation is 6,5 jaar oud, maar Internet Explorer toch ook zo'n 4 jaar. Ik weet niet wat de snelheid is dat een standaard daadwerkelijk geaccepteerd is door een bedrijf? Laten we zeggen, ik, weet niet wat Microsoft als acceptatiecriteria hanteerd?

Overigens is het wel een grappige hack, maar weet niet of het ook daadwerkelijk een bruikbare hack is? D'r was zo'n regeltje waar bruikbare hacks aan moesten voldoen en weet niet of deze hieraan voldoet...

[crisp]

Woudloper schreef op donderdag 16 december 2004 @ 00:06:
[...]

De recommendation is 6,5 jaar oud, maar Internet Explorer toch ook zo'n 4 jaar. Ik weet niet wat de snelheid is dat een standaard daadwerkelijk geaccepteerd is door een bedrijf? Laten we zeggen, ik, weet niet wat Microsoft als acceptatiecriteria hanteerd?

IE heeft toch wel een deel van CSS2 geimplementeerd, maar het is obvious dat dit erin 'gehacked' is gezien de vele bugs die daardoor getriggered worden (IE's floatmodel is om te huilen).

Overigens is het wel een grappige hack, maar weet niet of het ook daadwerkelijk een bruikbare hack is? D'r was zo'n regeltje waar bruikbare hacks aan moesten voldoen en weet niet of deze hieraan voldoet...

Het is wel valid CSS(2), dus wat dat betreft in mijn ogen al een betere manier om een style voor IE te forceren dan de _, \ en andere hacks die vertrouwen op IE's CSS-parsing bugs. Ik hou het echter liever bij de child-selector (die dus andersom werkt en daarmee beter forwards-compatible is) en/of conditional comments (wat een documented feature van IE is).

[Verwijderd]

Ik mag aannemen dat dit alleen in IE verkeerd gaat en dat Opera en Safari bijvoorbeeld wel de standaarden aanhouden? Alleen dan weer dat probleem met MacIE...

Loop daar nog tegen een paar andere probleempjes aan namelijk...

[ Voor 18% gewijzigd door Verwijderd op 16-12-2004 11:04 ]