Hallo,
ich habe mir eine kleines, valides Formular mit HTML und CSS gestrickt. Die Darstellung im FF, OP, NS ist tadellos, aber Ihr glaubt es nicht: Im IE 5.01, 5.5 und 6 kommt es zu Abweichungen. Diese Verschieben die Legend um 7 Pixel nach recht. Warum? Und was kann man dagegen machen?
Was bei mir die grossen Fragezeichen auslöst ist, dass padding und margin für die Legend bereits auf 0 gesetzt sind und trotzdem wird das Ding eingerückt. Sitzt ich oder Microsoft auf dem Schlauch?
Hier der Code:
<h1>Administrator Login</h1>
<p>Please enter your username and your password for login. </p>
<form method="get" action="index.htm">
<fieldset>
<legend>Login informations </legend>
<ul class="form">
<li class="form_x"><label for="username">Username</label><input type="text" maxlength="40" name="username" id="username" class="form" /></li>
<li class="form_x"><label for="password">Password</label><input type="text" maxlength="40" name="password" id="password" class="form" /></li>
<li class="form_end"><input type="reset" value="Reset" class="reset" /><input type="submit" value="Submit" class="submit" /></li>
</ul>
</fieldset>
</form>
Hier das dazugehörige CSS:
fieldset {
width: 600px;
background: url(/img/formback2.gif) left bottom repeat-x;
padding: 0;
border: none;
border-top: 1px solid #ccc;
margin: 0;
}
legend {
color: #333;
font-size: 1.2em;
padding: 0;
border: none;
margin: 0;
}
ul.form {
list-style: none;
padding: 0;
border: none;
margin: 0;
}
li.form_x {
width: 600px;
background: url(/img/formdiv.gif) left bottom repeat-x;
padding: 12px 0 12px 0;
border: none;
margin: 0;
}
li.form_end {
width: 600px;
padding: 12px 0 12px 0;
border: none;
margin: 0;
}
label {
font-size: 1.1em;
width: 175px;
display: block;
clear: both;
float: left;
padding: 0 0 0 25px;
border: none;
margin: 0;
}
input.form {
width: 370px;
font-family: 'times new roman', times, serif;
font-size: 1em;
padding: 0;
margin: 0;
}
input.reset {
width: 175px;
font-family: 'times new roman', times, serif;
font-size: 1em;
padding: 0;
margin: 0 0 0 200px;
}
input.submit {
width: 175px;
font-family: 'times new roman', times, serif;
font-size: 1em;
padding: 0;
margin: 0 0 0 25px;
}
Meine armen Mäuse flehen schon wieder um Gnade.
Gruss und Danke