Código:
#ingreso fieldset {
width: 300px;
display: block;
background-color: #EEEEEE;
border: 1px solid #333333;
}
#ingreso legend {
font-size: 11px;
font-weight: bold;
}
#ingreso label {
width: 100px;
display: block;
float: left;
}
#ingreso #usuario,#contrasenia {
background-color: #FFFFFF;
width: 150px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #666666;
border-left-color: #666666;
margin-bottom: 5px;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
<form id="ingreso" name="ingreso" method="post" action="">
<fieldset><legend>Ingreso para usuarios registrados</legend>
<label>Usuario </label>
<input name="usuario" type="text" id="usuario" />
<br />
<label>Contraseña </label>
<input name="contrasenia" type="password" id="contrasenia" />
<br />
<input type="button" name="Button" value="Ingresar" />
</fieldset>
</form>
Si quito lo que está en rojo, el color de fondo es respetado dentro de los límites del fieldset.. pero al colocarlo, se pasa por encima del borde superior (todo en IE)
Alguna idea?
Se me ocurre recrearlo todo con <div's>... pero si se puede evitar, mejor