background-color de fieldset: malo, malo, malo!

[AlZuwaga]

En realidad, el malo malo malo es el IE...

¿Hay forma que el background-color de un fieldset, en IE, no se "escape" por encima de los bordes de éste?

Llevo horas (qué exagerado ¬¬) haciendo un bonito formulario y al probarlo en IE se me descaraja todo

[AlZuwaga]

Mmm... acabo de caer en que cuando no está el <legend> del titulo del <fieldset>, el color de fondo de éste es respetado dentro de los límites...

Ahora pongo un poco de código..

[AlZuwaga]

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

[AlZuwaga]

Bueno, imitándolo a fuerza de divs me quedó así:

Código:

#contenedor_ingreso {
	background-color: #EEEEEE;
	border: 1px solid #000000;
	width: 300px;
}
#contenedor_ingreso_interior {
	margin: 5px;
}
#contenedor_ingreso_interior label {
	float: left;
	width: 100px;
}

#simil_legend_fieldset_contenedor {
	position: relative;
	left: 5px;
	top: -1px;
	width: 230px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
}
#simil_legend_fieldset_txt {
	left: 3px;
	top: -8px;
	font-size: 11px;
	font-weight: bold;
	position: relative;
}
#contenedor_ingreso_interior #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;
}
#contenedor_ingreso_interior #ingresar {
	background-color: #FFFFFF;
	border: 1px solid #333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}




<div id="contenedor_ingreso">
	<div id="simil_legend_fieldset_contenedor">
		<div id="simil_legend_fieldset_txt">Ingreso para usuarios registrados</div>
	</div>
  <div id="contenedor_ingreso_interior">
	  <label>Usuario </label>
	  <input name="usuario" type="text" id="usuario" />
	  <br />
	  <label>Contrase&ntilde;a </label>
	  <input name="contrasenia" type="password" id="contrasenia" />
	  <br />
	  <label>&nbsp;</label>
	  <input name="ingresar" type="button" id="ingresar" value="Ingresar" />
  </div>
</div>

es cualquiera ¿no?

[caricatos]

Hola:

No entiendo eso de que se escape... si es justamente el efecto que se quiere con la pareja fieldset-legend... y el legend con su texto recortado por el borde...

Justamente, no llevo horas sino semanas intentando que en mozilla ponga un height a 100% y no se salga de su contenedor... (ya he desistido) http://www.forosdelweb.com/f53/maquetando-fieldset-legend-mozilla-351581/

Saludos

[RoQ]

se refiere al background del fieldset, pues la verdad no se, podrias sacar el legend del fieldset y bajarlo flotandolo o algo asi, pero creo que ya no se veria tan bonito.

[AlZuwaga]

Hola caricatos, justamente es el efecto deseado. Ocurre que con IE el color de fondo del fieldset se va unos cuantos pixeles (+- 5 a ojo de mal cubero) por arriba del texto del <legend>.. ¿me explico?

Creo que con probar los códigos que coloqué se tendría que recrear la situación (auqneu tal vez copipastié mal en el foro)... igualmente, mañana subo a algún hosting los archivos para que lo visualicen sin tener que hacer nada uds al respecto.

RoQ, "masomenos" lo imité con la versión div's... pero no me convence.

Gracias, mañana lo continuo y les comento

[AlZuwaga]

Bueno, acá está: http://www.alzuwaga.com.ar/tests/fieldset/
El de arriba es el del fieldset real y el de abajo el del pseudo-fieldset imitado con divs

Ahora veo que el color del borde superior del div usado para "cubrir" el borde del pseudofieldset debe ser del mismo color de fondo que tiene el pseudofieldset y no del color de fondo de la página (gris en vez de blanco era más fácil de esribir y leer =)

[furoya]

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

[pive10]

¡Buenas!.

Se que la solución que propongo llega bastante tarde, pero espero que le pueda servir a otras personas.

AlZuwaga propone una solución que emula los fieldset, pero en cambio esta que propongo no exite la necesidad de tocar el código, tan solo lo que hay que agregar en la CSS es lo siguiente:

----> Para los fieldset:

fieldset{
position: relative;
}

----> Para los legend:

legend{
position:absolute;
top: -0.8em;
}

Dichos cambios se ven correctamente tambien en Firefox, Safari y Google Chrome. Espero le sirva de ayuda a alguien.

Un saludo.

[furoya]

Sí. Ya pasó mucho tiempo. Y por lo general, cuando aparece un mensaje así, es para poner alguna güevada.
Pero no es éste el caso. Es así, eso 'casi' funciona. Muchas gracias.

Acá está un código completo por si alguien lo quiere probar.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>

<style type="text/css">
#ingreso fieldset {
        width: 20em;
        display: block;
        background-color: #EE00EE;
        border: 1px solid #333333;
	padding: 0 0.25em 0.25em 0.25em;
}
#ingreso legend {
        font-size: 0.75em;
        font-weight: bold;
        background-color: #00ee00;
	margin-top: -0.5em;
}

#ingreso label {
        width: 6em;
        display: block;
        float: left;
}
#ingreso #usuario,#contrasenia {
        background-color: #FFFFFF;
        width: 10em;
        border-bottom-width: 0.1em;
        border-left-width: 0.1em;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: solid;
        border-left-style: solid;
        border-bottom-color: #666666;
        border-left-color: #666666;
        font-size: 0.75em;
        font-family: Verdana, Arial, Helvetica, sans-serif;
}

</style>
</head>
<body>
<h2>Prueba <tt>fieldset</tt>.</h2>

<form id="ingreso" name="ingreso" method="post" action="">
  <fieldset><legend>Ingreso para usuarios registrados</legend>
  <p><label>Usuario </label>
  <input name="usuario" type="text" id="usuario" ></p>
  
  <p><label>Contraseña </label>
  <input name="contrasenia" type="password" id="contrasenia">
  </p>
  <input type="button" name="Button" value="Ingresar" >
  </fieldset>
</form> 
</body>
</html> 

En realidad las posiciones absolutas o relativas no mejoran las cosas. Pero el margen negativo, sí. En IE 7, de alguna forma cambia la manera en que muestra los fieldset.