Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de background-color de fieldset: malo, malo, malo! en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/12/2005, 14:59
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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
__________________
...___...
  #2 (permalink)  
Antiguo 06/12/2005, 15:05
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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..
__________________
...___...
  #3 (permalink)  
Antiguo 06/12/2005, 15:09
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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
__________________
...___...
  #4 (permalink)  
Antiguo 06/12/2005, 15:37
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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?
__________________
...___...
  #5 (permalink)  
Antiguo 06/12/2005, 16:03
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #6 (permalink)  
Antiguo 06/12/2005, 16:16
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 7 meses
Puntos: 0
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.
  #7 (permalink)  
Antiguo 06/12/2005, 17:33
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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
__________________
...___...
  #8 (permalink)  
Antiguo 07/12/2005, 10:20
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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 =)
__________________
...___...
  #9 (permalink)  
Antiguo 22/12/2005, 16:59
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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

  #10 (permalink)  
Antiguo 28/07/2009, 06:08
 
Fecha de Ingreso: noviembre-2008
Ubicación: Tenerife
Mensajes: 6
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: background-color de fieldset: malo, malo, malo!

¡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.
  #11 (permalink)  
Antiguo 09/08/2009, 13:10
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: background-color de fieldset: malo, malo, malo!

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:22.