Wat krijgen we nu? Waar gaan we dat schrijven?

Ik ben een layout aan het omzetten naar xtml/css, en dat gaat vlotjes? Ik kom geen noemenswaardige problemen tegen, het lukt allemaal proper cross-browser—IE5/6/7, FF, zelfs de Macintosh-jongens doen niet vervelend!

Ik moet zeggen dat ik er niet naar uitkeek, om me met die zooi bezig te houden, maar dat het voorlopig nog niet echt tegensteekt. Niet dat het een uiterst complexe layout is, maar ook niet dat het super-simpel is: en toch lukt dat zonder last.

Ik denk dat het geheim is: gewoon van nul beginnen. Vertrekken van andermans templates of van hap-snel-klaar-dingen op tinternet, dat is een recept om reddeloos in de soep te lopen.

Nee: zelf alles in elkaar boksen. En alles zo eenvoudig mogelijk houden. En geen hacks tenzij het echt nodig is: ik ben een dikke honderd css-regels verder, en ik heb er voorlopig nog maar twee: een gif in plaats van een png voor een masker dat in een header komt als het IE5/6 is, en een menuutje dat ik in IE6/7 nét iets hoger wil zetten dan in al de rest (0.4 em hoger, om precies te zijn).

En die twee dingen doe ik gewoon via conditional comments:

<!--[if lte IE 6]>
<link rel="stylesheet" href="css/styles-ie.css" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="css/styles-ie7.css" type="text/css" />
<![endif]-->

niets meer te html *-nonsens, die overigens niet meer werkt in IE7.

En behalve van nul beginnen, ook, zoals bij zoveel van die dingen: rustig blijven. Het niet te ver zoeken als het niet echt moet.

Zoals één probleem dat ik had waarbij de laatste tab bovenaan (met een zoekformulier erin) op een volgende lijn kwam, maar enkel in Safari 2+ op Mac OSX 10.4. De tabs staan in een <ul>, en de <li>’s hebben een padding—die padding beprutsen? Pixelneuken tot het in orde komt? Eéntje meer, reload, zien of het lukt, ééntje minder, font-size wat groter, font-size wat kleiner? Beetje trekken aan letter-spacing? Welnee: gewoon de <ul>, die top en right absolute gepositioned stond, een expliciete width geven: daar verslikte Safari zich blijkbaar op.

Of nog zo één: het logo staat te hoog. Een margin of padding of godbetert een border toevoegen? Allerlei relatieve of absolute positioneringen proberen? Welnee: gewoon vertical-align: bottom doen en alles is in orde.

Gnaa. ‘t Doet deugd, als al die jaren nonsens-sites maken op het internet plots blijken hun nut gehad te hebben. 🙂

Geschreven al luisterend naar: Beck – Odelay – Where It’s At