Skillnader i IE och FF

oddholst · 2007-10-24, 10:54

Jag håller på att göra en liten inloggningsruta som skall vara längst upp i hörnet på en webbsida. Koden ser ut så här:

Kod:

<div style="padding-left: 2px; padding-top: 2px; font-size: 8pt; font-family: sans-serif; position: absolute; top: 3px; right: 3px; width: 300px; height: 24px; border: solid 1px black; background-color: #efefff;">

E-post: <input style="border: solid 1px black; font-size: 8pt; width: 75px; height: 16px;" name="email"> 

 Lösen:<input type="password" style="border: solid 1px black; font-size: 8pt; width: 75px; height: 16px;" name="pass">

<input type="submit" name="login" style="border: solid 1px black; width: 50px; height: 16px;" value="Logga in">"
</div>

Problemet är att när det visas i IE7 så ser det ut så här:

Men i FF ser det ut så här:

Hur skall jag göra så att de inte visar så här olika? Jag har ju satt samma höjd på både textrutorna och skicka-knappen.

robertsson · 2007-10-24, 11:00

du får leka med padding och margin värdena för logga in knappen

tartareandesire · 2007-10-24, 19:49

Citat:

Originally posted by robertsson@Oct 24 2007, 11:00
du får leka med padding och margin värdena för logga in knappen

Tyvärr är det så illa. Firefox och IE definierar margin och padding olika. Du kan läsa mer om detta på åtskilliga håll på nätet t.ex. Webdesignskolan (heter den väl om den finns kvar?) om man vill ha en trevlig guide på svenska.

biokonsult · 2007-10-24, 20:36

he he det där känner jag ju inte igen ..... :P

Wackerberg · 2007-10-25, 00:16

Hm, nu har jag inte FF installerat. Dock hade jag inte angett någon höjd på input-fälten eller submit-knappen. Även angett textstorlek på knappen. Och som absolut första åtgärd angett till webbläsaren vilken standard du kör efter, annars går den in i quirks-mode.
(I övrigt tänker jag på hur skalbar din sida är, fasta pixlar är inte the shit längre... men det är en annan historia)

EDIT> Biokonsult: "Sajten fungerar endast med internet explorer"...

En standard kan t.ex. anges genom följande

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/DTD/strict.dtd">

martine · 2007-10-25, 00:27

Citat:

Originally posted by Wackerberg@Oct 25 2007, 00:16
EDIT> Biokonsult: "Sajten fungerar endast med internet explorer"...

=

Vi stänger ute en fjärdedel(!) av våra besökare eftersom vi är lata och okunniga…

Browserstat

Jag har för mig att skillnaden i höjdled på checkboxar och submitknappar beror på någon obskyr css-instruktion. Kan vara vertical-align som styr hur det ska placeras i höjdled för dessa eftersom dessa är inline-element.

Testa med vertical-align: middle; eller vertical-align: baseline;, det går att lösa i alla fall.

Edit: ser ut som vertical-align är satt till baseline i IE och till top i FF. Att "leka" med padding eller margin löser ju inte detta.

robertsson · 2007-10-31, 08:35

Citat:

Ursprungligen postat av tartareandesire

Citat:

Ursprungligen postat av robertsson

du får leka med padding och margin värdena för logga in knappen

Tyvärr är det så illa. Firefox och IE definierar margin och padding olika. Du kan läsa mer om detta på åtskilliga håll på nätet t.ex. Webdesignskolan (heter den väl om den finns kvar?) om man vill ha en trevlig guide på svenska.

Visst är det så, men det förändrar inte faktum att man kan lösa det med margin och padding så det ser bra ut i båda programmen.

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Skillnader i IE och FF