[CSS] Formulier is rotzooi

[kleautviool]

Ik heb dus een formulier gemaakt aan de hand van deze pagina, alleen wordt dit formulier in IE helemaal verkeerd weergegeven, maar Mozilla en Opera geven het formulier wel gewoon zoals het hoort weer. Nu is mijn vraag dus of misschien iemand weet hoe ik ervoor kan zorgen dat ook IE mijn formulier normaal weergeeft. Ik heb nu dit in mijn stylesheet staan:

code:

    div.contactContainer {
        width: 445px;
        padding: 5px;
        margin: 0px auto;
        background-color: #999;
        border: dotted 1px #444;
    }
    div.contactRow {
        clear: both;
        padding-top: 10px;
        background-color: #999;
    }
    div.contactRow span.formLabel {
        float: left;
        width: 115px;
        text-align: right;
        background-color: #999;
    }
    div.contactRow span.formField {
        float: right;
        width: 315px;
        text-align: left;
        background-color: #999;
    }

en in mijn html zelf staat het op de volgende manier:

code:

<div class="contactContainer">
    <form method="post" action="foe" id="reageer">
    <div class="contactRow">
        <span class="formLabel">Naam:</span><span class="formField"><input type="text" size="20" name="naam" /></span>
    </div>
    <div class="contactRow">
        <span class="formLabel">Email:</span><span class="formField"><input type="text" size="20" name="email" /></span>
    </div>
    <div class="contactRow">
        <span class="formLabel">Reactie:</span><span class="formField"><textarea name="reactie" cols="45" rows="10"></textarea></span>
    </div>
    <div class="contactRow">
        <span class="formLabel">Gegevens opslaan?:</span><span class="formField"><input type="radio" value="ja" name="opslaan" /> Ja &nbsp;&nbsp;<input type="radio" value="nee" name="opslaan" /> Nee</span>
    </div>
    <div class="contactRow">
        <span class="formLabel"><input type="submit" value="Plaats reactie" /></span><span class="formField"><input type="reset" value="Beginwaarden" /></span>
    </div>
    </form>
</div>

De pagina waar het fout gaat zelf staat hier

Alvast bedankt!

[crisp]

Ik zou geen spans gebruiken om te floaten, maar een blocklevel-element zoals een div

[dArtagnan]

probeer eens het volgende in je style element:

Cascading Stylesheet:

box-sizing: padding-box;
-moz-box-sizing: padding-box;

[ Voor 28% gewijzigd door dArtagnan op 21-09-2003 20:42 ]

[Preatorium]

Klopt, maar het gaat fout bij de opgave vcan je breedtes, hierdoor kmt het inputveld onder e-mail te staan bv. al eens iets grotere px breedtes geprobeerd?

[Verwijderd]

• gebruik LABEL tags i.p.v. SPANs voor je formulier-labels (LABEL@W3C) - dan kun je er vaak nog op klikken ook...
• geef display:block aan elementen die je float of gebruik block-level elementen als DIVs
• Geef classes aan je formelementen zelf om ze een breedte te geven
• Geef inline elementen geen breedte
• Nest block-level elementen (zoals TEXTAREA) niet in inline-elementen (zoals SPAN)
• goed dat je probeert om dit met CSS te doen!

[ Voor 22% gewijzigd door Verwijderd op 21-09-2003 20:55 ]

[kleautviool]

Ok, bedankt voor de tips allemaal.
Ik zal morgen eens kijken hoe ik het op ga lossen
Bedankt voor de hulp iig!

[creative8500]

HTML:

<form action="blah" method="post">
  <div>
    <label for="name">naam</label>
    <input type="text" name="name" id="name" />
  </div>
</div>

Met bovenstaande code kun je net zoveel doen als met al die spans. Classes zijn overbodig hier, want je kunt gewoon de "form > div"-selector gebruiken, of "form#contact > div".

Cascading Stylesheet:

label:after { content: ":"; } /* zodat JAWS niet steeds "colon" opleest */

Mogelijk zou het beter zijn om het fieldset-element hiervoor te gebruiken, i.p.v. div.
Voor meer info zie simplebits: SimpleQuiz › Form(atting) › Conclusion.