Har stött på ett problem ett par gånger nu, som jag faktiskt aldrig tidigare har stött på. Det gäller select och inputfält i formulär. De får visuellt olika höjd och bredd av nån underlig anledning.
Dokumenttypen på sidan är XHTML 1.0 Transitional.
Formulärfälten är uppdelade i två "kolumner" som är olika flytande divar med float:left/right etc.
Ni kan se sidan på följande url:
www.eitss.se/demo/mha_konsult/online.html
Jag har t ex ett gäng inputfält som följer efter följande klass (OBS! De är nerkortade här från onödigt skräp) i stylesheetet:
#frmContact input.txt {
font-size: 10px;
color: #000000;
background-color: #f5f7fa;
height: 15px;
width: 156px;
padding-left: 2px;
border: solid 1px #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 1px;
}
Selectboxarna följer klassen #frmContact select.txt som innehåller exakt samma värden som i koden ovan för inputfälten.
Detta borde få de selectboxarna och inputfälten att se visuellt likadana ut, dvs i bredd och höjd. Men av nån anledning gör de inte det. Varken i IE eller FF.
I båda webbläsarna blir selectboxarna totalt 156 px breda (ska vara 160, precis som inputfälten). Dessutom i FF så blir selectboxen en pixel lägre än inputfältet, dvs 17 px istället för 18.
I IE blir höjden rätt, men där blir det istället så att själva selectboxen lägger sig visuellt en pixel högre upp än inputfältet, dvs utrymmet mellan labeltexten och selectboxen är en pixel mindre än mellan labeltexten och inputfälten (vilket i sin tur gör att resterande inputfält i vänster kolumn skjuts upp en pixel (även två) och hela formuläret blir skevt!
Är det nån som har nån idé hur man kan påverka/åtgärda detta på ett smidigt sätt?!?
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?!? :)
DanneStMedlem sedan feb. 20041 311 inlägg Inte jag iaf, och som noob gällande divvar så gör såna här saker mig ännu mer förvirrad... :-)
TroxyMedlem sedan mars 20041 505 inlägg Det finns helt enkelt ingen logik i detta.
Anledningen är att det inte finns någon definierad standard för hur CSS ska fungera på formulär, så webbläsarna gör lite som dom vill.
Så utseendet på formulär skiljer sig alltid berodende på webbläsare, operativsystem och inställningar.
Det är med andra ord meningslöst att sitta och irritera sig över exakta pixlar eftersom det aldrig kommer bli perfekt ändå.
