Had ik al eens gezegd dat ik niet zo'n fan ben van Internet Explorer?

Tenzij mijn extra beta-testers (bedankt, sn0r, harv en Henk) iets over het hoofd hebben gezien, werkt de site van Michael nu volledig zoals bedoeld in IE7. Bij het bereiken van die status heb ik weer iets nieuws geleerd over die fijne, fijne browser: het is on-mo-ge-lijk om een HR-element zonder rand neer te zetten.

Een HR, voor degenen die minder thuis zijn in HTML, is zo'n horizontale streep, die je gebruikt om stukken tekst of pagina een beetje zichtbaar te scheiden. HR staat dan ook voor Horizontal Rule. Bij Michael gebruiken we ze tussen de posts in zijn dagboek.

In de meeste browsers wordt een HR, als je er verder niks mee doet, weergegeven als een soort richel, een inkeping in de pagina. Dat wilden wij niet, natuurlijk, wij wilden een leuk blauw handgetekend-achtig lijntje. Geen probleem, met een beetje CSS haal je de border (die voor dat inkeping-effect zorgt) eraf, geeft het ding een hoogte van een paar pixels en een achtergrondplaatje. Klaar.

In IE zie je dan echter nog steeds die rotrand.

We hebben op alle mogelijke manieren geprobeerd om die rand weg te krijgen, maar dat kan niet. IE bleef volhouden dat een HR een rand moest, of niet werd weergegeven, of ineens een grijze balk werd.

"Maak er gewoon een plaatje van!", werd geroepen. Maar eigenlijk is me dat tegen het zere been. Een HR is een HR, een plaatje is een ander ding. Mensen met een braille-lezer, zoekmachines, noem maar op: die zien een plaatje niet als HR, hoezeer je het er ook op laat lijken. Ik wil semantisch correcte code als het even kan, dus een HR op een plek waar ik een scheiding aan wil brengen.

Uiteindelijk is de oplossing gevonden in een niet perfecte, maar acceptabele oplossing: de HR wordt in een div gestopt, en die div krijgt dat plaatje als achtergrond. De HR bínnen de div maak je dan onzichtbaar. Netto effect is dat mensen met een normale browser die streep zien, en mensen met een tekst-browser een HR.

In de HTML:

<div class="hr"><hr /></div>

In de CSS (voor IE):

.hr {
  height: 4px;
  background-image: url(/pad/naar/plaatje.gif;
}
hr { display: none; }

Het staat me stiekem toch niet helemaal aan. Het voelt als een knieval. Maar goed, voor een ego is niet echt plaats als je sites cross-browser kloppend wilt hebben...

Rest ons nu nog om een trucje uit te halen om de plaatjes in de navigatie ook in IE6 weer te laten geven, en dan is iedereen weer tevreden. Maar dat, vriendjes en vriendinnetjes, kan wat mij betreft wel even wachten. Ik heb eerst nog een ander visje te bakken:

De nieuwe lay voor DNZM

Die is namelijk zodanig dicht bij voltooiing, dat ik het niet over mijn hart kan verkrijgen om die te laten wachten op een fix voor een tekortkoming in een browser die al zo lang dood is. Er zijn een paar tweaks die ik nog voor de uitrol klaar wil hebben, en dat zijn geen grote dingen.

Na de uitrol zal ik ongetwijfeld nog wat zaken tegenkomen (of zal ik daar door mijn trouwe schare lezers op gewezen worden, hoop ik), en heb ik nog wat werk aan het rechtbreien van de categorieën en tags. Want, misschien had u dat al een beetje gezien, ik ben na de overstap naar WordPress 2.3 ook tags gaan gebruiken. Ja, ik ben om. Waar ik [eerder geen liefhebber was -> Waarom ik geen enorm liefhebber ben van Tags] heb ik het licht gezien. Maar daarover later meer.

Dan heb ik ook nog een kluifje aan het verhuizen van alle content van dille.ath.cx naar een andere URL, aangezien de hostnaam dille.ath.cx geblokkeerd is. Ook daarover later meer. Korte samenvatting: verlopen, gekaapt door een spamhoer, gebokkeerd door DynDNS.

Ik ga nu gezellig in de code duiken, en hoop u weer te spreken in een geheel nieuw jasje!