<rant alert, sla gerust over>

Boo! Hiss! Schande! Viezerd!

We hebben hier op het werk een website in xhtml en css, gemaakt door iemand extern. Daar liepen een aantal dingen mee verkeerd. Beweeg over de links van de hoofdtekst en de navigatie–floeps!–verdwijnt. Waar de navigatie links eindigt, is de tekst van de hoofdkolom naar links ingesprongen. Dergelijke dingen.

Als ik erbij vertel dat de problemen alleen optreden in Internet Explorer 6 voor Windows, dan weet al wie al een tijdje op tinternet zit en wat zuivere html-ontwikkeling achter de kiezen heeft, meteen waar het over gaat: de guillotine-bug, de driepixeltekstjog, van die typische onbegrijpelijk-waarom-bugs.

Het is dan alleen wat zoeken hoe het precies op te lossen, en waar precies.

…en dan komt het allemaal uit natuurlijk. Het is helemaal niet de schuld van Internet Explorer.

Ja natuurlijk: IE6 heeft zijn bugs, en IE6 doet raar, en die twee dingen hierboven zijn inderdaad zeer vieze bugs van IE6, en ja, IE6 gaat in de fout, en ja het zijn smeerlappen daar bij Mickey$oft, en Intervis Expl0der zuigt, en tralala… maar!

Als we er nu eens van uitgaan dat IE6 een incontournabel probleem is, en dat al bijna vijf jaar is, dan gaan we toch niet de problemen opzoeken?

Die lay-out staat stijf van de om-miserie-vragende dingen. Overal floats die tot op de pixel naast andere elementen staan (denk na voor je twintig elementen gebruikt als drie ook voldoende is), hacks binnen hacks binnen hacks, Holly hacks, html * hacks (gebruik conditionele comments verdorie, ze zijn er voor!), prutserijen met hardgecodeerd <li class="first">...</li>-dingen (gebruik unobtrusive javascript en DOM om die er automatisch bij te zetten), <li id="current"><a href="#"><span>...</span></a></li>-monstrositeiten (“current” is nauwelijks geschikt als ID, die <span> staat daar voor de één of andere hack, doe dat dan ook via DOM als het echt moet, of liever: vermijd het altogether), …

Het hele concept van die pagina is doodeenvoudig: header, middenkolom, linkerkolom, rechterkolom, footer. En toch staat het bol van de nutteloze crap. Volg even mee wat er onder de header gebeurt:

<div id="main">
   <div id="columns">
      <div id="content">
          <div id="leftcol">
             <div>
               <div class="section">
                  <h3><span>...</span></h3>
                  <ul><li>...<li></ul>
               </div>
               <div class="section">
                  <h2><span>...</span></h2>
                  <ul><li>...<li></ul>
               </div>
             </div>
          </div>
          <div id="maincol">
             <div>
                <h2><span>...</span></h2>
                ...
             </div>
          </div>
      </div>
   </div>
   <div id="rightcol">
      <div>
         <div class="section">
            <h3><span>...</span></h3>
            <ul><li><span>...</span><li></ul>
         </div>
         <div class="section">
            <h3><span>...</span></h3>
            <ul><li>...<li></ul>
         </div>
      </div>
   </div>
</div>

Bon, ik wil nog even voorbijgaan aan de keuze voor

<dummy>
  <links />
  <main />
</dummy>
<rechts />

als er eigenlijk niets is tegen

<main />
<links />
<rechts />

…maar: àl! die! divs! Gniii! Allez, dat is nu toch om miserie vràgen? En waar is dat voor nodig?

En pas op, ik bespaar u de css nog: alles (àlles!) expliciet in pixels. En uiteraard: eerst alle stijlen op niets zetten (ul li table tr td th p blockquote div img etc. allemaal expliciet op één fontgrootte geen margins geen padding geen niets ten duvel) en dan enerzijds twaalfentachtig keer overal een font aan koppelen, en anderzijds “details” vergeten: stijlen voor <h2> en <h3> in de lopende tekst bijvoorbeeld, of voor <dl>/<dt>/<dd>, of voor <ul> en <ol> en <li>. Of voor <td> en <th>. Gemakkelijk hoor. En o ja, in het algemeen <a> de stijl geven zoals die in de navigatie moet komen, maar er geen rekening mee houden dat niet noodzakelijk alle <a>’s graag als display:block getoond worden. En <img> voor het gemak overal en altijd display:block, met een kadertje errond, met 5 pixels erboven en 15 eronder, en margin: 0 auto, toe maar.

Fucking amateurs. Heeft die mens ergens een paar artikels op ALA gelezen in de zomer van 2004, denkt hij dat hij het allemaal kan.

Ik zie Internet Explorer 5.5 en 6 een beetje als de oude televisies van het internet. Nieuwe televisies, daar kun je een logo helemaal in de hoek zetten, daar zijn rechte lijnen rechte lijnen, zelfs als ze langs de randen lopen. Oude televisies, daar lukt dat niet mee. Een logo helemaal pal in de rechterbovenhoek, dat wordt afgesneden. Rechte lijnen aan de rand van het scherm, als ze er al op komen, staan bol en zijn dikker in het midden. Op oude televisies zijn kleuren niet zo scherp. Schimmert het als de nieuwslezer een streepjespak aandoet.

Ja, wel, inderdaad: IE6 heeft problemen met CSS.

Houd daar dan verdomme rekenening mee! Als televisiemakers dat kunnen, waarom is dat dan zo moeilijk voor websitelayoutmakers? Dedju!

En dan maar zagen, zagen, zagen: Internet Explorer boehoe! Firefox joepie! Microsoft awoert! Open source r0olz! [met de occasionele opera is nóg veel beter en ’t is niet eerlijk dat niemand ons gebruikt waaaa]

Fuckers.

<end rant, regular programming will resume in a sec>