WN - Skillnader i IE och FF

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Skillnader i IE och FF (https://www.wn.se/forum/showthread.php?t=24585)

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:
http://www.oddmedia.se/bilder/ie_exempel_1.png

Men i FF ser det ut så här:
http://www.oddmedia.se/bilder/ff_exempel_1.png

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.

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

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.

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

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

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.

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

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.