FAQ |
Kalender |
![]() |
#1 | |||
|
||||
Mycket flitig postare
|
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: Kod:
#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; } 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?!? |
|||
![]() |
![]() |
|
|