[CSS] <div> ipv <table> probleem

[Mythix]

ik heb een formulier op mijn pagina en ik probeer alles mooi te krijgen dmv CSS, omdat ik geen tabellen wil gebruik ik div's, ik heb alles mooi uitgewerkt en getest in IE en het werkt perfect, maar als ik het test in FF slaagt alles door elkaar !

ik heb al alles geprobeert om het in beide browsers mooi te krijgen, maar ik vind het probleem niet, waarschijnlijk zit er een foutje in mij CSS waar IE overkijkt want ik denk dat FF een betere CSS engine heeft ... alleen weet ik niet waar het foutje zit!

dit is mijn formulier:

code:

<form method="post">
                <div class="form_text">Voornaam:</div>
                <div class="form_field"><input type="text" name="voornaam" /></div>
                <div class="form_text">Tussenletters:</div>
                <div class="form_field"><input type="text" name="tssletters" /></div>
                <div class="form_text">Achternaam:</div>
                <div class="form_field"><input type="text" name="achternaam" /></div>
                <div class="form_text">Geslacht:</div>
                <div class="form_field">
                    <select size="2" name="geslacht">
                        <option>Man</option>
                        <option>Vrouw</option>
                    </select>
                </div>
                <div class="form_text">Wachtwoord:</div>
                <div class="form_field"><input type="password" name="wachtwoord" /></div>
                <div class="form_bottom"><input type="submit" value="registreren!" /></div>
</form>

en dit is de css die erbij hoort:

code:

form {
    border: 1px solid black;
    width: 446px;
    margin-left: 10px;
    background-color: #ccccff;
    clear: both;
}

div.form_text {
    background-color: #ccccff;
    width: 190px;
    float: left;
    height: 100%px;
    padding: 3px;
    vertical-align: center;
}

div.form_field {
    background-color: #bbbbee;
    border-left: 1px dotted black;
    clear: right;
    width: 240px;
    float: right;
    height: 25px;
    padding: 3px;
    padding-left: 10px;
}

div.form_bottom {
    background-color: #aaaadd;
    border-top: 1px dotted black;
    height: 25px;
    text-align: center;
    width: 444px;
    padding: 3px;
    padding-top: 5px;
}

input {
    border: 1px solid #333366;
    color: #333366;
    background-color: #FFFFFF;
}

je kan het formulier vinden op de volgende URL
http://www.topmanager.nl/werkplan.html

zoals je ziet is er een groot verschil in IE en FF, hoe krijg ik het in FF ook mooi ?

[disjfa]

Als je een tabel wilt maken moet je echt gewoon een tabel maken aangezien dit hiervoor gemaakt is.

Maar hier wil je een formulier maken. Maak dan ook een formulier met elementen die ervoor gemaakt zijn. Divjes zijn hier niet voor gemaakt. Ik zou eerst een onderzoek doen naar wat html elementen zijn en waneer deze te gebruiken

[whoami]

CSS; HTML, Javascript, en alle andere client-side stuff, horen niet thuis in P&W, maar in W&G.

Zie ook de forum-beschrijvingen.

P&W -> W&G.

[Verwijderd]

doe eens iets met <fieldset>, <label> en <legend> etc en dan alinea's maken met <p>

astu, wat meer uitleg: http://www.rikkertkoppes.com/thoughts/clean-forms

[ Voor 43% gewijzigd door Verwijderd op 10-08-2005 15:47 ]

[Mythix]

In de eerste plaats wou ik proberen om alles zonder tabellen klaar te kunnen spelen omdat ik artikels gelezen heb over CSS en daar heb ik gelezen dat je tabellen beter kunt vermijden...

maar aangezien het mij tog niet lukt zal ik het idd beter met tabellen oplossen, zoals je kunt zien is de pagina in beide browsers nu goed...

toch bedankt voor de reactie

[crisp]

190 + 3 + 3 + 240 + 10 + 3 = 449
en de breedte van je form is maar 446px (zoek maar eens op 'boxmodel')

overigens, wat is dit:

Cascading Stylesheet:

height: 100%px;

verder: zie mophor. Enkel semantiekloze div's gebruiken is minstens net zo 'erg' als een tabel gebruiken...

[ Voor 26% gewijzigd door crisp op 10-08-2005 16:02 ]

[Verwijderd]

wat heb je niet begrepen van ons commentaar?

een dergelijke layout is in 5 minuten met nette elementen en CSS te maken, maar je begrijpt dat we dat natuurlijk niet gaan voorkauwen

[SchizoDuckie]

Over dit hele verhaal..

is het niet een goed idee om eens een sticky te maken voor topics als deze met daarin een simpele uitleg over hoe en wat is semantische html?

[ Voor 25% gewijzigd door SchizoDuckie op 10-08-2005 18:04 ]

[Verwijderd]

/me vindt dat het sticky waarin staat dat mensen eerst moeten zoeken eigenlijk in veel van deze gevallen afdoende had kunnen zijn

[Verwijderd]

Mythix schreef op woensdag 10 augustus 2005 @ 15:58:
In de eerste plaats wou ik proberen om alles zonder tabellen klaar te kunnen spelen omdat ik artikels gelezen heb over CSS en daar heb ik gelezen dat je tabellen beter kunt vermijden...

maar aangezien het mij tog niet lukt zal ik het idd beter met tabellen oplossen, zoals je kunt zien is de pagina in beide browsers nu goed...

toch bedankt voor de reactie

Dit snap ik dus echt niet he....post je een heel verhaal, worden er genoeg oplossingen aangedragen, ga je het "toch maar weer in tabellen 'oplossen'".


Het is zoals Morphor zegt in 5 minuten te maken, er zijn talloze voorbeelden in onzer vrind google te vinden.

[ZeilDude]

Bekijk dit mooie voorbeeld eens, volledig gemaakt met <fieldset>, <legend>, <label> en
<input> tags. Dus zonder tabel! Zelfs <div>-jes zijn niet nodig:



(klik op de afbeelding om de bijbehorende webpagina te bekijken)