Undvik fallgropar vid positionering i CSS

För att undvika strul mellan webbläsare, använd alltid följande ordning när du vill positionera element i din HTML layout:

1. Använd helst padding för att positionera element, texter etc
2. Om inte 1 går, använd hellre margin än position relative
3. För att lägga på skuggor etc och slippa lägga på margins på andra element så använd hellre minusmargin (t ex margin-right: -4px) än position relative, right: -4px

På det hela taget, så fort du börjar skriva position:relative eller z-index: så har du (oftast) valt fel lösning – följ ovanstående lista.

Faktiskt så är det så bra att padding och border har fungerat klockrent i alla browsers sen IE6 med margin ibland ”puttar” på andra element och därmed agerar olika i olika browsers. IE7 är bättre än IE6 men är fortfarande annorlunda än Firefox och Chrome/Safari.

Behöver du ändå använda margins så finns det ett hack som gör att IE6 hanteras separat och det är att skriva _margin: (dvs understreck innan), då reagerar endast IE6 och inte andra browsers. (tack Ola för tipset!)

Behöver du göra undantag för IE7 så är trixet att skriva !important! (dvs ett extra utropstecken efter !important!)

Christian Landgren
2009-03-10