:strip_icc():strip_exif()/u/12314/monty-python.jpg?f=community)
Met behulp van een divbox en enkele onderliggende divclasses heb ik een loginbox gemaakt in de header van een pagina. Op deze manier krijg ik drie kolommen en twee rijen, vergelijkbaar met een tabel.
In de bovenste rijen staat tekst en in de onderste rijen respectievelijk 2 inputfields en 1 button.
In Internet Explorer (6.0) komen die formelements niet netjes uit. Het lijkt erop dat ze een stuk of vier pixels naar rechts worden verschoven, terwijl ik ze, net als de tekst in de bovenste rij, strak aan de linkerkant wil hebben.
Ik heb verschillende dingen geprobeerd. Paddings en margins van de diverse elementen aangepast, alsmede met text-indent en text-align: left gespeeld, maar tot dusver heeft het tot nul resultaat geleid; de formelements blijven verkeerd staan in IE.
Kan iemand mij een duwtje in de goede richting geven?
Bekijk de desbetreffende pagina hier
De bijbehorende CSS:
In de bovenste rijen staat tekst en in de onderste rijen respectievelijk 2 inputfields en 1 button.
In Internet Explorer (6.0) komen die formelements niet netjes uit. Het lijkt erop dat ze een stuk of vier pixels naar rechts worden verschoven, terwijl ik ze, net als de tekst in de bovenste rij, strak aan de linkerkant wil hebben.
Ik heb verschillende dingen geprobeerd. Paddings en margins van de diverse elementen aangepast, alsmede met text-indent en text-align: left gespeeld, maar tot dusver heeft het tot nul resultaat geleid; de formelements blijven verkeerd staan in IE.
Kan iemand mij een duwtje in de goede richting geven?
Bekijk de desbetreffende pagina hier
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div id="header"> <form action="index.php" method="post" name="login" class="form"> <div id="loginbox"> <div class="cell"><strong>Gebruikersnaam</strong></div> <div class="cell"><strong>Wachtwoord</strong></div> <div class="cell"><a href="?action=register" class="link">Registreren</a></div> <div class="cell"><input name="username" type="text" class="field" /></div> <div class="cell"><input name="password" type="password" class="field" /></div> <div class="cell"><input name="loginsubmit" type="submit" value="Login" class="button" /></div> </div> </form> <h1>Jos Laan Intranet <span class="version">versie 0.1</span></h1> </div> |
De bijbehorende CSS:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
| #loginbox { float: left; width: 375px; text-align: left; } #loginbox .cell { width: 115px; float: left; margin-bottom: 5px; margin-left: 5px; background: red; padding: 0px; text-align: left; text-indent: 0px; } #loginbox .form { margin: 0px; padding: 0px; } #loginbox .field { border: 1px solid black; background: #FFFFCC; width: 100px; margin: 0px; padding: 0px; float: left; } |
[ Voor 15% gewijzigd door Rexomnium op 12-01-2006 14:05 ]
We zijn allemaal vaandeldrager in een optocht van gekwetsten.