Hola todos :
A mi también me molesta bastante la forma en que el
IE presenta los legend. Cuando lo tuve que resolver hice ésto. (pero era solamente para
IE5, para el resto hay que ajustarlo)
Código:
<html>
<head>
<title></title>
<style>
body {
background-color: #666666;
}
#ingreso fieldset {
width: 300px;
display: block;
border: none;
}
#ingreso legend {
font-size: 11px;
font-weight: bold;
background-color: #EEEEEE;
padding: 2px 5px;
}
#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;
}
#ingreso #contenido {
background-color: #EEEEEE;
padding: 2px 5px;
}
#ingreso2 fieldset {
width: 300px;
display: block;
background-image: url("http://img43.imageshack.us/img43/9528/marmol2in.gif");
background-position: 0 0.5em 0 0;
background-repeat: repeat-x;
border: 1px solid #333333;
}
#ingreso2 legend {
font-size: 11px;
font-weight: bold;
background-image: url("http://img43.imageshack.us/img43/9528/marmol2in.gif");
background-color: #EEEEEE;
}
#ingreso2 label {
width: 100px;
display: block;
float: left;
}
#ingreso2 #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;
}
</style>
</head>
<body>
<form id="ingreso" name="ingreso" method="post" action="">
<fieldset><legend>Ingreso para usuarios registrados</legend>
<div id="contenido">
<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" />
</div>
</fieldset>
</form>
<form id="ingreso2" 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>
</body>
</html>
la imagen es
