tox: Mäuse melken mit Explorer die 2te: Heute mit <legend>

Beitrag lesen

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&nbsp;</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