Foros del web, para los que viven de bits

Al Zuwaga · 06-dic-2005, 13:59

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

Al Zuwaga · 06-dic-2005, 14:05

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..

Al Zuwaga · 06-dic-2005, 14:09

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

Al Zuwaga · 06-dic-2005, 14:37

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 · 06-dic-2005, 15:03

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) maquetando fieldset/legend en Mozilla

Saludos

RoQ · 06-dic-2005, 15:16

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.

Al Zuwaga · 06-dic-2005, 16:33

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

Al Zuwaga · 07-dic-2005, 09:20

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 · 22-dic-2005, 15:59

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

06-dic-2005, 13:59	#1 (permalink)
Al Zuwaga Moderador Fecha de Ingreso: noviembre-2002 Ubicación: 34.517 S, 58.500 O Mensajes: 12.300	background-color de fieldset: malo, malo, malo! 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 __________________ ···---···

06-dic-2005, 14:05	#2 (permalink)
Al Zuwaga Moderador Fecha de Ingreso: noviembre-2002 Ubicación: 34.517 S, 58.500 O Mensajes: 12.300	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.. __________________ ···---···

06-dic-2005, 15:03	#5 (permalink)
caricatos Moderador Fecha de Ingreso: noviembre-2002 Ubicación: Torremolinos (Málaga) Mensajes: 12.219	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) maquetando fieldset/legend en Mozilla Saludos __________________ Por favor: No hagan preguntas de temas de foros en mensajes privados... no las respondo

06-dic-2005, 15:16	#6 (permalink)
RoQ Fecha de Ingreso: abril-2005 Mensajes: 763	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. __________________ Blog de Juegos, Ayuda para CSS, XHTML semantico

06-dic-2005, 16:33	#7 (permalink)
Al Zuwaga Moderador Fecha de Ingreso: noviembre-2002 Ubicación: 34.517 S, 58.500 O Mensajes: 12.300	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 __________________ ···---···

07-dic-2005, 09:20	#8 (permalink)
Al Zuwaga Moderador Fecha de Ingreso: noviembre-2002 Ubicación: 34.517 S, 58.500 O Mensajes: 12.300	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 =) __________________ ···---···

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado