HTC en CSS voor IE6


Raar maar waar, als je de hoogte en/of breedte van een <li> in een <ol> aanpast via CSS, gebeurd er iets leuk in Internet Explorer:
De nummers volgens elkaar niet meer op maar er komt telkens opnieuw een 1.
Dit valt op te lossen via HTC, dit is een extern Javascript dat opgeroepen wordt via CSS, weer een reden bij, bij de duizend anderen, om af te stappen van het gebruik van Internet Explorer.

Zoals de titel het al zegt, dit is enkel en alleen voor IE van toepassing, alle andere browsers maken er geen probleem van dat je je <li> wilt stylen via CSS.

Een voorbeeld van een ol lijst.

<ol>
<li>Dit is nummer 1</li>
<li>Dit is nummer 2</li>
<li>Dit is nummer 3</li>
<li>Dit is nummer 4</li>
<li>Dit is nummer 5</li>
<li>Dit is nummer 6</li>
</ol>

Dit zou er zonder enige opmaak via CSS zo uitzien, zoals je ziet heeft elke item zijn eigen nummer.

Nu gaan we eens een beetje style toevoegen om het effect in werking te laten treden, dus we gaan de height van de <li> een waarde geven.

ol {
list-style: inside decimal;
width: 200px
}
ol li {
height: 20px;
}

Dus nu neem je eens die oude browser Internet Explorer uit de kast en bekijkt deze pagina eens, voor alle zekerheid bekijk de pagina ook eens met een goede browser zodat je ziet wat er mis loopt.

De oplossing heet HTC

Met HTC kan je behaviors toevoegen aan je CSS, dus eens iets nieuw, namelijk de behaviors syntax gebruiken.

Htc is dus eigenlijk Javascript dat je oproept via CSS, ja dit is mogelijk, daarmee kun je natuurlijk ook andere effecten mee verkrijgen maar daarover later meer.

Css krijgt deze toevoeging:

ol.hack {
behavior: url(oplossing_olbug.htc);
}

En zo ziet het magische Htc bestand uit:

Sla dit bestand op als eender_welke_naam.htc

<attach event="ondocumentready" handler="FixHetProbleem" />
<script type="text/javascript">
function FixHetProbleem(){
l = element.getElementsByTagName("li");
for(c=0;c<l.length;c++) {
l[c].value = c+element.start;
}
}
</script>

De Xhtml ziet er nu zo uit

<ol class="hack"> /*de class .hack aan de ol voegen*/
<li>Dit is nummer 1</li>
<li>Dit is nummer 2</li>
<li>Dit is nummer 3</li>
<li>Dit is nummer 4</li>
<li>Dit is nummer 5</li>
<li>Dit is nummer 6</li>
</ol>

Nu zal onze <ol> lijst bug vrij zijn in IE, en het bewijs hiervan zie je hier, maar denk eraan, met Internet Explorer browser bekijken.

Dus hier de <ol> lijst zonder hack
en hier de <ol> lijst met hack.