Citat:
Originally posted by Seattlegrunge@Jul 23 2006, 23:21
Jag har löst det för både IE och FF nu, men det är en sjuk lösning anser jag. Tänk på att selectboxen ska vara 160px bred och 18px hög.
Först och främst så tog jag bort all padding för selectboxen så blev det lättare att räkna (inte för mig, utan för webbläsarna).
Sen satte jag width: 160px; så blev selectboxen 160px bred (både IE o FF) trots border på vardera sida som är 1px. Alltså räknas bordern in i totala bredden!!!
Därefter så satte jag height: 16px; så blev selectboxen 18px hög (både IE o FF). Här är border på 1px både uppe och nere, men tvärt mot vad bredden gjorde, så räknade höjden inte in bordern i den satta höjden på 16px, utan lade till 2px (1+1) utöver detta, alltså 18px. Hur sjukt är inte det på en skala?!?!?
Nu såg allt kanon ut i FF, men inte i IE.
För IE var jag tvungen att sätta margin-top: 1px; och margin-bottom: 1px; på selectboxen för att den skulle hamna i relation (samma horisontella position) som inputfältet till höger (se sidan på länken i förra inlägget). Detta gjorde dessutom att undervarande inputfält i vänster kolumn "positionerades" rätt horisontellt jämfört med höger kolumn. Då blir det i sin tur fel i FF, så detta sista fick göras specifikt för endast IE.
Nån som ser någon logik i det hela?!? 
|
Jag skulle starkt varna för att använda pixel-exakta lösningar. I synnerhet på formulärelement, de varierar alltid från operativsystem till operativsystem (och även från webläsare till webläsare) och har inte samma självklara mått som en div t ex.
På Safari (Mac) har du fortfarande förskjutningar.
och lite annat strul
Om det enda du eftersträvar är att ha elementen på samma höjdnivå så är en annan lösning bättre, t ex att stoppa elementen parvis i en gemensam divv och floata lejblarna:
Kod:
<div>
<label style="float: left;">Namn:<br><input type="bla" …>
<label style="float: left;">Företag:<br><input type="bla" …>
</div>
Lämna lite utrymme för pixelskillnader i din design så är du på den säkra sidan och slipper lägga ner tid på att testa i allehanda webbläsare (alternativ strunta i den och ta klagomålen senare när dom kommer). Det ger dessutom mindre webläsarspecifik kod som är enklare att förstå och bearbeta senare.
