Weergave verschilt tussen IE en FF, css aanpassen?

[oeverloos]

Beste tweakers

Ik heb een blog (www.vikingsinspace.nl) waar ik regelmatig bridgespelletjes in diagrammen beschrijf. Ik gebruik de volgende relevante code voor het vormgeven van een diagram:

Cascading Stylesheet:

#GIF { font-weight: bold; } 
p.GIF { display: block; } 

.diagram .header { 
    font-size: smaller; 
    margin-left: 0.25em; 
    margin-right: 0.25em; 
    margin-bottom: 0; 
    margin-top: auto; 
    padding: 0.25em; 
    border: 0.1em outset; 
    width: 6em; 
    float: left; 
    background: #FFFFFF; 
} 

.diagram { 
    width: 23em; 
} 

.diagram .hand { 
    width: 8em; 
} 

.diagram .south , .diagram .north { 
    margin-left: 7em; 
} 

.diagram .north { 
    padding-bottom: 1ex; 
} 

.diagram .south { 
    clear: both; 
    padding-top: 1ex; 
} 

.diagram .west { 
    float: left; 
    clear: left; 
} 

.diagram .east { 
    float:right; } 
    
.red { 
    color: red; 
} 

.hand .seatname { 
    margin-left: 1em; 
    font-size: smaller; 
    font-style: italic; 
} 

.holding:before { 
    display: inline; 
}     

.spade:before { 
    content: url(http://www.vikingsinspace.nl/S.gif) " "
}

.heart:before { 
    content: url(http://www.vikingsinspace.nl/H.gif) " " 
}     
    
.diamond:before { 
    content: url(http://www.vikingsinspace.nl/D.gif) " " 
}     

.club:before  { 
    content: url(http://www.vikingsinspace.nl/C.gif) " " 
} 

HTML:

<div class="diagram">
<div class="header">
<div>South Dealer</div>
<div>NS Vul</div>
</div>
<div class="hand north">
<div class="seatname">North</div>
<div class="spade holding">xxx</div>
<div class="heart holding">AKJ9x</div>
<div class="diamond holding">x</div>
<div class="club holding">KQxx</div>
</div>
<div class="hand west">
<div class="seatname">West</div>
<div class="spade holding">AJxxx</div>
<div class="heart holding">x</div>
<div class="diamond holding">Txxx</div>
<div class="club holding">Txx</div>
</div>
<div class="hand east">
<div class="seatname">East</div>
<div class="spade holding">KQTx</div>
<div class="heart holding">QTxx</div>
<div class="diamond holding">xx</div>
<div class="club holding">Jxx</div>
</div>
<div class="hand south">
<div class="seatname">South</div>
<div class="spade holding">x</div>
<div class="heart holding">xxx</div>
<div class="diamond holding">AKQJxx</div>
<div class="club holding">Axx</div>
</div>
</div>

Bovenstaande code geeft in Firefox het gewenste resultaat, diagrammen en symbolen worden juist weergegeven. IE (6&7) gooit roet in mijn eten en weigert o.a. symbolen weer te geven. Ik ben weinig bekend met css of evt hacks voor IE, maar wel perfectionistisch genoeg dat dit euvel me behoorlijk steekt. Ik heb echter geen idee waar ik moet zoeken. "Bridgediagram en css" leveren erg weinig documentatie op in google.

Als er trouwens op of aanmerkingen zijn op de code, manier of layout dan hoor ik dat graag.
Dank.

[BtM909]

je gebruikt pseudo selectors die IE gewoon nog niet snapt... :before is een klein probleempje

Waarom gebruik je geen achtergrond plaatje met een padding-left voor de tekst? Of lijsten (om daar nou allemaal div's voor te gebruiken er zijn betere elementen daarvoor)

[IntToStr]

Dat :before is neem ik aan nog niet geimplementeerd bij IE.

Je kunt het oplossen door een background-image en een margin/padding te gebruiken.

Zie boven dus

[ Voor 9% gewijzigd door IntToStr op 22-03-2007 14:38 . Reden: Te laat... ]

[BtM909]

Of je laadt de addon van Dean Edwards in (ben ik zelf geen voorstander van, maar ok):
http://dean.edwards.name/IE7/

Er zijn trouwens ook opties om delen te gebruiken op je eigen site... Wellicht kan je alleen de pseudo selectors gebruiken

[oeverloos]

Beste tweakers

Ik heb het bovenstaande probleem lange tijd laten liggen, maar heb nu toch eindelijk tijd gevonden voor de oplossing.

Cascading Stylesheet:

.spade { 
background-image: url(http://www.vikingsinspace.nl/S.gif); 
background-repeat: no-repeat;
position:relative;
padding-left: 15px 
}

Zowel IE (6 en7) als FF slikken het. Ik blij. Dank voor de hulp en suggesties.