Formulär m Stilmall GRRR!

11 svar · 441 visningar · startad av Nipon 1 mars 2005

NiponMedlem sedan juli 2003270 inlägg

Frågan1 mars 2005 14:44#1

:l Nu blir jag snart gaalen! Tänkte strukturera ett formulär med enklast möjliga CSS. Inget avancerat, alltså! La funktionerna mellan p-taggar och fixade lite. Perfekt!

Det enda problemet är att den sista raden - med submit och reset knapparna som ligger mellan <p> och </p> - inte får nån top-marginal i firefox... Ser OK ut i IE.

Men det är ju för sjutton en vanlig j-la p-tagg som jag inte manipulerat marginalerna med alls! Borde visas enligt standard. Som de tidigare p-taggarna! Fattar nada! Hjälp!


Stilmallen:

<style type="text/css">
<!--
form label { font-family: Verdana; color: #000000; font-size: 11px; }
form input {  font-family: Verdana; color: #000000; font-size: 11px; border: 1px solid #000000; background-color: #eaeaea; }
form textarea {  font-family: Verdana; color: #000000; font-size: 11px; border: 1px solid #000000; background-color: #eaeaea; }

form p { width: 340px; clear: both; }
form label { float: left; }
form input { float: right; margin-left: 10px; }
form textarea { float: right; margin-left: 10px; }
-->
</style>

Formuläret:

<form>
<p><label for="namn">Namn:</label>
<input type="text" id="namn" name="namn" size="35"></p>

<p><label for="email">E-post:</label>
<input type="text" id="email" name="email" size="35"></p>

<p><label for="meddelande">Meddelande:</label>
<textarea id="meddelande" name="meddelande" cols="35" rows="5"></textarea></p>

<p>
<input type="submit" name="skicka" value="Skicka"><input type="reset" name="rensa" value="Rensa"></p>
</form>

Vad beror det på????

nitro2k01Medlem sedan aug. 20039 340 inlägg

1 mars 2005 14:48#2

En gissning är att det är label-taggen som får en marignal och inte p-taggen.

NiponMedlem sedan juli 2003270 inlägg

1 mars 2005 14:58#3

Nix! Har kollat det!

shunMedlem sedan mars 2004230 inlägg

1 mars 2005 15:05#4

Testat att ange en marginal?

NiponMedlem sedan juli 2003270 inlägg

1 mars 2005 15:13#5

Mmm! Det har jag.

Men de visas ju så olika... Då uppstår en massa annat krångel!

Enklast möjligt var det!

Så jag tänkte låta bli det och låta p-marginalerna vara standard. För en pixel hit eller dit tycker jag inte spelar någon roll.

InsiderMedlem sedan jan. 2000978 inlägg

1 mars 2005 16:40#6

Du kan ju alltid lägga till:

form input[type=submit], input[type=reset] {margin-top:20px;}

Då ser det lika ut i båda läsarna.

shunMedlem sedan mars 2004230 inlägg

1 mars 2005 17:48#7

Har för mig att IE inte gillar [type=submit] o.s.v., vill du ändå använda dig av Insiders lösning kan du skriva så här:

input[type=submit],
input[type=reset],
.submit
{margin-top:20px;}

och sätta submit och reset som klassen .submit inne i dokumentet.

InsiderMedlem sedan jan. 2000978 inlägg

1 mars 2005 18:55#8

shun skrev:

Har för mig att IE inte gillar [type=submit] o.s.v.

Det var det som var poängen eftersom det redan såg OK ut i IE.

shunMedlem sedan mars 2004230 inlägg

1 mars 2005 21:34#9

Insider skrev:

shun skrev:

Har för mig att IE inte gillar [type=submit] o.s.v.

Det var det som var poängen eftersom det redan såg OK ut i IE.

Okej då, men ifall man vill att det ska se precis likadant ut kan det vara svårt att gissa sig till IEs förinställda marginal (såvida det inte är det du gjort :) )

icaaqMedlem sedan okt. 20005 273 inlägg

1 mars 2005 21:41#10

Problemet är inte marginalerna på p-taggen utan det är dina objekt inuti p som floatas hitan o ditan ;).
Men det går så klart att lösa :)

http://member.webforum.nu/1029/nippon.htm

mv icaaq

InsiderMedlem sedan jan. 2000978 inlägg

1 mars 2005 21:53#11

shun skrev:

Okej då, men ifall man vill att det ska se precis likadant ut kan det vara svårt att gissa sig till IEs förinställda marginal (såvida det inte är det du gjort :) )

Nej, jag gissade inte. Jag höftade. :p

NiponMedlem sedan juli 2003270 inlägg

2 mars 2005 11:05#12

Tack alla för hjälp!

icaaq skrev:

Problemet är inte marginalerna på p-taggen utan det är dina objekt inuti p som floatas hitan o ditan .

Jag som tyckte att jag hade floatat så finurligt både kors och tvärs... :p

Icaaq! Problemet löste sig med text-align i stället för float-right. Tack snälla för hjälpen!

Eftersom jag hade tänkt att göra det enkelt utan att nolla marginaler och så - trixade jag lite med ditt kodförslag... Och det funkade helt OK utan att ange några marginaler alls i P. Men det blev så stor skillnad i FF och IE så jag petade in lite margins fast jag tänkt låta bli...

Tack igen och så här blev det:

form p { width: 340px; text-align: right; clear: both; margin: 0px 0px 10px 0px; }
form label { float: left; }
form input { margin-left: 10px; }
form textarea { margin-left: 10px; }