Soms vraagt een mens zich af waar hij in godsnaam mee bezig is.
CSS allemaal goed en wel, en het is een gemak als het werkt, maar als het niet werkt…

Ik heb een navigatiemenu dat in een <ul> zit, alsdus:

<ul class="leftnav">
   <li class="selected"><a href="een.htm">Nummer één </a></li>
   <li><a href="twee.htm">Numero duo</a></li>
   <li><a href="drie.htm">Optie drie </a></li>
   <li><a href="vier.htm">Quattro </a></li>
   <li><a href="vijf.htm">Numéro cinq </a></li>
   <li><a href="zes.htm">You...are number six</a></li>
</ul>

die <ul> moet bovenaan links staan. Dat doe ik alsdus:

position: absolute;
padding-left:0;
top: 100px;
left: 10px;	
width: 200px;

Op Firefox geeft dat alles in orde, maar op IE6 staat de <ul> 40 pixels te ver naar rechts. Aaaargh!

Met goeie ouwe <table>s zou het op een ik en een gij gedaan zijn (<tr><td valign="top">menu</td> and bob’s yer uncle), maar ik wil het absoluut in het proper hebben. Grrr!

En wat was het? Uiteraard de goeie ouwe box model miserie: width in IE wordt berekend minus padding en margins, terwijl dat eigenlijk niet zo zou moegen zijn. Oplossing:

position: absolute;
padding:0;
top: 110px;
left: 10px;	
width: 200px;

Zucht.