Formulär m Stilmall GRRR!

: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å????

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

Nix! Har kollat det!

Testat att ange en marginal?

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.

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.

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.

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.

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 :) )

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

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

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; }

:e