Input image och firefox

Tillbaka till artiklar

Innehållsförteckning

Jag upptäckte nyss ett problem med firefox som inte verkar vara så känt enligt mina sökningar på nätet.

Problemet upptäcktes och ställde till besvär i vår populära gratistjänst "GEO members" som har en input type image på en kartbild.

Känner ni till input type image?

Såhär programmerar man

Ungefär så såg koden ut, lite förkorttat.

Såhär fungerar det

Det input type image är till för är att den fungerar ungefär som en vanlig submitknapp i vilket formulär som helst - MEN "knappen" är i form av en bild med valfri storlek OCH post-datan som skickas innehåller koordinaterna för klickpositionen.

Man får alltså reda på VAR användaren klickade någonstans.
Detta använder jag för att låta användaren markera på kartan var han / hon bor, för att sedan lagra koordinaterna i en databas och presentera vid ett annat tillfälle.

Koordinaterna man får ut är X och Y i förhållande till bildens övre vänstra hörn.

Klickar man alltså 10 pixlar ned från bildens överkant och 20 pixlar från vänsterkanten så ser postdatan ut såhär: (förutom övriga formulärfält som inte är relevanta i detta exempel)

Symptomen

I opera och IE(6) fick jag ut helt korrekta koordinater, men firefox visade på tok fel. Firefox visade skärmkoordnaterna, alltså inte relativt till själva bilden. Om bilden hade legat direkt uppe till vänster på själva webbsidan så hade det vart helt lugnt, men bilden var centrerad, vilket ställde till det lite.

Detta var ju en katastrof... Jag fick ut koordinater som x,y: 800,200 etc, och det var ju långt utanför bildens ramar när det i själva verket hade förväntats t.ex. (200, 50).

Jag förstod inte varför firefox betedde sig så och google gav mig ingen hjälp.

Orsaken och lösningen

Efter en stund konstaterade jag att det berodde på att det div-element som inputen ligger i har "position: relative;" vilket ställde till besvär hos firefox.

Genom att koda om lite grann där och jag blev av med den relativa positioneringen så blev allt bra.

Jag har inte testat applikationen i IE 7 än, men ska göra det senare under dagen.

---

Gå till toppen