Pseudo elementen in Cascading Style Sheets gebruik je om bepaalde selectors op te maken. Het :first-letter pseudo element (CSS 2.1) bijvoorbeeld zet je in om de eerste letter van een element (een paragraaf) op te maken. Het :first-letter pseudo element wordt ondersteund door een behoorlijk aantal eigenschappen. Om er enkele te noemen: font, color, background, margin, padding, border, text-decoration, text-transform en line-height staan tot je beschikking.

Tot zover de theorie. In de praktijk gaat het vaak wat minder soepeltjes. Zo werd ik geattendeerd op het feit dat mijn Rammstein Sonne diezijntje crasht onder Internet Explorer. En ja hoor, Internet Explorer versie 6 gaat genadeloos tegen de vlakte. Au! Tijd om eens uit te zoeken waarvan Internet Explorer 6 dan zo van slag raakt.

Trial and error leert dat Internet Explorer 6 zich verslikt in de stijlbladcombinatie van een selector id en een childselector die voorzien is van de :first-letter eigenschappen voor background, margin en padding. Ter illustratie:

Voorbeeld 1 (werkt zonder problemen)

p:first-letter {

font-size: 200%;

font-weight: bold;

color: #000;

background: #ccc;

margin: 5px 0 2px 0;

padding: 1px 2px 0 0;

text-align: left;

}

Voorbeeld 2 (veroorzaakt een programmacrash in Internet Explorer 6)

#nb p:first-letter {

font-size: 200%;

font-weight: bold;

color: #000;

background: #ccc;

margin: 5px 0 2px 0;

padding: 1px 2px 0 0;

text-align: left;

}

Voorbeeld 3 (geen crash als background, margin en padding eigenschappen zijn uitgezet)

#nb p:first-letter {

font-size: 200%;

font-weight: bold;

color: #000;

/*

background: #ccc;

margin: 5px 0 2px 0;

padding: 1px 2px 0 0;

*/
text-align: left;

}

Is dit nou een schoolvoorbeeld van buggy behaviour of mis ik iets????

 browser · bug · internet explorer

Nullbeta aka HansR babbelt deze website louter op persoonlijke titel vol. Mogelijkerwijs worden Nullbeta's standpunten niet gedeeld door de organisatie die z'n boterham belegt. Maar kan dat iemand boeien?