När man ska lära sig bygga CSS-baserade webbsidor (istället för att harva på i ”tabellträsket”) måste man lära sig två saker:
1) CSS, dvs modellen, syntaxen, osv.
2) Alla buggar och felaktigheter i de olika webbläsarna som gör att CSS inte fungerar som tänkt.
I en värld där alla använder Firefox/Mozilla skulle punkt 2 inte behövas. Men där är vi inte. I en värld där alla hade senaste modellen av valfri modern webbläsare skulle punkt 2 vara lindrig. men där är vi inte. Tyvärr.
Utan att vara någon CSS-expert (långt ifrån) så påstår jag ändå att nästan allting fungerar faktiskt som tänkt i Mozillas renderingsmotor. Safari är inte lika bra, men nästan. När jag gjorde iordning den här designen jobbade jag i Firefox och Safari och allting såg mycket bra ut. Sen kollade jag det i IE5/Mac och IE6/Win och då var det inte lika kul längre.
Med hjälp av en kollega och lite testande så lyckades jag få till flera av problemen med IE6/Win genom att ändra lite mindre detaljer. Men i IE5/Mac var det värre. Texten i löpet på sidan förskjöts åt höger mer och mer för varje ny text och rubrik. IE5/Mac är en ganska bra webbläsare, när det gäller att följa CSS-standarden. Den är i alla fall betydligt bättre än IE5/Win som är skräckexemplet. Men av någon anledning uppstod detta förskjutningsfel i IE5/Mac och bara där.
Efter mycket letande, och framförallt läsande, på nätet hittade jag till slut vad jag råkat ut för: Incorrect inheritance of positioning information to children of relatively positioned elements. Denna något torra, men korrekta, definition betyder i klartext att element ärver positionsegenskaper som inte ska ärvas. Testa den här sidan i IE5/Mac för att se ett exempel. (Jag borde förstås ha tagit en skärmdump om jag varit lite mera ambitiös, men jag vill helst slippa lägga mer tid på detta.)
Jag hade position: relative och left: 148px på det element som omsluter hela min huvudspalt, den jag kallar löpet. Buggen i IE5/Mac innebär att de element som befinner sig inuti löpet felaktigt ärvde denna positionsinformation. Därmed förskjöts de 148 pixlar åt höger för varje nytt element (nästan varje – det skedde inte riktigt alltid). Även om jag uttryckligen satte dessa element till position: static.
Lösningen blev att ta bort position: relative och left: 148px och istället använda margin-left: 148px. Det ser bra ut i IE5/Mac och förstås Firefox/Safari. Nu bävar jag för att kolla i IE6/Win igen, men jag hoppas det ska fungera.
Så mycket jobb för att anpassa sig till buggar i webbläsare, men en nyttig erfarenhet om jag ska kunna börja bygga standardbaserade webbsidor professionellt. Jag har dock fortfarande det värsta framför mig, nämligen att kolla hur det ser ut i IE5/Win. Jag är rätt säker på att det ser ännu värre ut där, eftersom IE5/Win har fått hela CSS:s box model om bakfoten.
Nåja, jag är en bit på vägen till en fungerande sajt i alla fall. Och jag har lärt mig en hel del.