[Seattlegrunge]

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:
http://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?!?

[Seattlegrunge]

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?!?

[martine]

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:

<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.

[Seattlegrunge]

Tack för ditt svar!

Du har fått mig att tänka om nu, kanon!
Jag ska frångå pixlarexakthet i formulären och du sa en grym grej som inte slagit mig tidigare; att köra breda divar och lägga fälten parvis med float på dessa istället. Klart en bättre grej.

Dock får jag inga förskjutningar i Safari som du nämner, så där ser jag inte felet.
EDIT: Nu såg jag förskjutningar i höjdled hehe... det ska fixas


Däremot var det bra att du visade din andra screenshot. Jag refererade till en klass som jag hade glömt att skapa i CSS-filen, därför kom texten helt på vilovägar. Det funkar i IE/FF på Windows trots detta, sen glömde jag kolla på Mac. Tack!