[CSS] Form verkeerd geplaatst in IE7 en Mozilla

[A-J]

Allereerst neem een kijkje hier: http://www.ffxii.net/index_formerror.php

Let op de navbar met de login form (en datum). Die heb ik even op een height van 16px gezet (in table/td's, jaja ik gebruik geen divs) en wil dat daar een form inpast met invul-velden, checkboxen en knoppen van 16px of lager, zodat alles precies zou moeten passen binnen de navbar van 16px hoog en niet uitgerekt wordt... iets wat nu WEL het geval is in IE7 en Mozilla (check maar na). Alleen Opera doet zijn werk hier en geeft het prima weer. In IE7 en Mozilla lijkt het als or telkens een margin-top van 1~3 pixels wordt gegeven aan de form-elementen.
Check mijn source (en css) er maar op na, volgens mij doet ik echt niets fout. Iemand een idee?

Ik zal hier ff de form-code en css kopiëren, scheelt weer zoeken (okal is mijn source nog niet groot, ben pas net begonnen).

Form:

code:

    <table width="950" height="16" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td width="5"></td>
        <td width="746" valign="middle"><form action='/forums/index.php?act=Login&CODE=01' method='post' name='LOGIN'>
        Username: <input class='field' type='text' maxlength='64' name='UserName' />&nbsp;
        Password: <input class='field' type='password' name='PassWord' />&nbsp;
        <input class='checkbox' type='checkbox' name='CookieDate' value='1' checked='checked' /> Remember Me
        &nbsp; <input class='button' type='submit' name='submit' value='Log In' />
        &nbsp; <a href='/forums/index.php?act=Reg'>Register</a> | <a href='/forums/index.php?act=Reg&CODE=10'>Password Recovery</a></form></td>
        <td width="196" valign="middle" align="right">
        <?php
        echo date('l, F j, Y');
        ?>
        </td>
        <td width="5"></td>
    </tr>
    </table>

CSS:

code:

body {  
    margin: 0px; 
    color: #000000; 
    background: #003366 url('images/bg.gif') repeat-x 0 0;
}
td {
    font-family: Verdana; 
    font-size: 10px;
    color: #000000; 
}
form {  
    margin: 0px;
}
input.field {
    margin: 0px;
    padding:0px;
    width:120px;
    height: 16px;
    font-family: Verdana; 
    font-size: 10px;
    color: #003366;
    background: #FFFFFF;
    border: 1px solid #9AA7B9;
}
input.checkbox {
    margin: 0px;
    color: #003366;
    background:transparent;
    border: 0px;
}
input.button {
    margin: 0px;
    padding: 0px;
    font-family: Verdana; 
    font-size: 10px;
    color: #003366;
    background: #FFFFFF;
    border: 1px solid #9AA7B9;
}

[bakakaizoku]

Wil je 100% betrouwbaarheid op hoogtes en breedtes, schakel dan toch om naar DIV layouts. De layout welke je nu gebruikt is nog makkelijker in semantisch correcte code (dus divjes) te maken dan tabulair.

En wat dacht je van een tabel die 16 pixels hoog is (of zou moeten zijn), waar je een textbox van 16 pixels in zet met nog een randje van 1px er langs doet, dat gaat sowieso voor problemen zorgen want nu is je textbox ineens 2 pixels groter dan zijn wrapper poogt te zijn.

[_Thanatos_]

Helemaal mee eens. Ik zet <label> en <input> elementen altijd gewoon direct achter elkaar, gepaard in divs. Dan geef ik de labels een vaste breedte in css. Nouja, dan ben je toch al een heel eind.

Ohja en de boel natuurlijk netjes in een <fieldset> groeperen

[A-J]

mattttt schreef op dinsdag 19 augustus 2008 @ 09:49:
En wat dacht je van een tabel die 16 pixels hoog is (of zou moeten zijn), waar je een textbox van 16 pixels in zet met nog een randje van 1px er langs doet, dat gaat sowieso voor problemen zorgen want nu is je textbox ineens 2 pixels groter dan zijn wrapper poogt te zijn.

Ik snap je niet, die textboxen zijn 16px incl. border en margins staan op 0 van alles, dus ik heb geen idee hoe er vanaf de margin-top zoveel ruimte ontstaat.

[Da Weef]

Zoals anderen al stellen zou ik sowieso overstappen op divs... Maargoed, het feit dat je hier problemen hebt heeft te maken met de uitlijning van de checkbox en de button. Als je die verticaal uitlijnt op het midden is er niets aan de hand:

code:

body {  
    margin: 0px; 
    color: #000000; 
    background: #003366 url('images/bg.gif') repeat-x 0 0;
}
td {
    font-family: Verdana;
    font-size: 10px;
    color: #000000; 
}
form {  
    margin: 0px;
}
input.field {
    margin: 0px;
    padding:0px;
    width:120px;
    height: 16px;
    font-family: Verdana; 
    font-size: 10px;
    color: #003366;
    background: #FFFFFF;
    border: 1px solid #9AA7B9;
}
input.checkbox {
    vertical-align: middle;         
    margin: 0px;
    color: #003366;
    background:transparent;
    border: 0px;
}
input.button {
    vertical-align: middle;    
    margin: 0px;
    padding: 0px;
    font-family: Verdana; 
    font-size: 10px;
    color: #003366;
    background: #FFFFFF;
    border: 1px solid #9AA7B9;
}

[TeeDee]

mattttt schreef op dinsdag 19 augustus 2008 @ 09:49:
De layout welke je nu gebruikt is nog makkelijker in semantisch correcte code (dus divjes) te maken dan tabulair.

Niet om de discussie van het probleem weg te trekken, maar om nu te stellen dat
semantisch correcte code == divjes vind ik nergens op slaan.

Heel simpel gezegd: semantiek is betekenisleer. Een <div> heeft geen betekenis.

Voor de rest, lees even [html] opmaak van formulieren* door.

[A-J]

Okee ik ben nu een beetje mijn source aan het omgooien naar div's only. Maybe gaat het daarmee uiteindelijk beter. Effe een 'dom' vraagje tussendoor... hoe krijg ik tekst binnen een div op een valign="middle" ? Moet dit mbv padding or is er iets beters? Ik kan het niet vinden.
Alvast bedankt voor de hulp zover... ik zal misschien hier nog posten over nog meer div/css vragen bij het maken van het formulier, maar zal eerst zo goed mogelijk alles opzoeken/lezen ^^

[TeeDee]

A-J schreef op donderdag 21 augustus 2008 @ 18:12:
Okee ik ben nu een beetje mijn source aan het omgooien naar div's only. Maybe gaat het daarmee uiteindelijk beter. Effe een 'dom' vraagje tussendoor... hoe krijg ik tekst binnen een div op een valign="middle" ? Moet dit mbv padding or is er iets beters? Ik kan het niet vinden.
Alvast bedankt voor de hulp zover... ik zal misschien hier nog posten over nog meer div/css vragen bij het maken van het formulier, maar zal eerst zo goed mogelijk alles opzoeken/lezen ^^

There is no valign="middle".

Je zou eens kunnen googlen naar Vertical Center / Verticaal centreren.