Foros del Web » Creando para Internet » CSS »

Texto del fieldset se desborda del div en Firefox

Estas en el tema de Texto del fieldset se desborda del div en Firefox en el foro de CSS en Foros del Web. Estimados resulta que en una página estoy usando <fieldset> junto a <legend> para agrupar controles de un formulario. En Chrome y IE8 se ven bien, ...
  #1 (permalink)  
Antiguo 29/12/2010, 12:21
 
Fecha de Ingreso: junio-2010
Mensajes: 6
Antigüedad: 7 años, 5 meses
Puntos: 0
Exclamación Texto del fieldset se desborda del div en Firefox

Estimados resulta que en una página estoy usando <fieldset> junto a <legend> para agrupar controles de un formulario. En Chrome y IE8 se ven bien, pero el problema es con mozilla ya que el <legend> y su texto se desplaza fuera del div ...no se a que se debe este síntoma...les pongo unos pantallazos para que vean


[URL="http://www.subirimagenes.com/otros-fieldset-5632469.html"]Imagen completa[/URL]

como podría solucionar este asunto?

de antemano gracias
  #2 (permalink)  
Antiguo 30/12/2010, 07:45
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Texto del fieldset se desborda del div en Firefox

Códigos implicados o enlace a la página.
Recuerde que este es el foro de css, no de diseño gráfico.
  #3 (permalink)  
Antiguo 30/12/2010, 11:37
 
Fecha de Ingreso: junio-2010
Mensajes: 6
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Texto del fieldset se desborda del div en Firefox

soy nuevo acá asi que no lo sabía ¬¬

mi css es:

Código:
#opciones {
position:relative;
float:left;
left:32px;
top:2px;
width:13.9em;
height:600px;
margin:0;
padding:1em .5em 2em .5em;
background:#C6DAE1;
border:2px solid #eeeeee;
font-size:.9em;
}

#opciones h2 { 
margin:0 0 -1em 0; 
padding:0;
font-size:1em;
text-align:center;
letter-spacing:.0px;
}

#opciones legend, fieldset{
margin:auto;
font-size:12px;
text-align:left;
width:14em;
border-color:#CCC;
}
Solo pongo lo que corresponde a la duda que tengo, espero puedan ayudarme
  #4 (permalink)  
Antiguo 31/12/2010, 07:31
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Texto del fieldset se desborda del div en Firefox

kmpx:
El css sólo es insuficiente. Es necesario el html (en caso de que use programación, publique el generado en el navegador) para poder reproducir el problema y ver qué lo causa, ya sea directamente o por herencia.
  #5 (permalink)  
Antiguo 04/01/2011, 10:29
 
Fecha de Ingreso: junio-2010
Mensajes: 6
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Texto del fieldset se desborda del div en Firefox

Va entonces el html:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Pagina web</title>

<link rel="stylesheet" type="text/css" href="miestilo.css" />



</head>

<body>

<!--div header-->

<div id="header">

     <h1>Probando...</h1>

     <h3></h3>

</div><!--fin header-->



<!-- div opciones-->

<div id="opciones">

  <h2>&Aacute;rea de opciones</h2>

        <br><br>

        <form>

            <fieldset>

            <legend>Seleccione la combinacion de canciones que desea:</legend>

               

                <input type="radio" name="cancion" value="rock" id="opcion1"checked="checked"/> 

                <label for="opcion1">rock</label><br>

                <input type="radio" name="cancion" value="pop" id="opcion2"/>

                <label for="opcion2">Pop</label><br>

                <input type="radio" name="cancion" value="anglo" id="opcion3"/>

                <label for="opcion3">anglo</label><br>



            </fieldset><br><br>



            <fieldset>

            <legend>Seleccione la cantidad de canciones a elegir:</legend>

            <select name="canciones" >

			        <option value="1">1</option>

			        <option value="2">2</option>

			        <option value="3">3</option>

			        <option value="4">4</option>

			        <option value="5">5</option>

			</select>

            

            </fieldset>

            <br><br>        

           

            <input type="button" name="Enviar" value="Enviar" id="dibujar" />

            <input type="reset" name="borrar" value="Borrar" id="borrar" />

            

        </form>


</div><!--fin #opciones-->


<!--div contenedor de div imagen--> 

<div id="contenido">    


</div><!--fin #contenido-->

</body>

</html> 
Ahora si espero que se pueda ...saludos
  #6 (permalink)  
Antiguo 04/01/2011, 15:55
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Texto del fieldset se desborda del div en Firefox

Hola:

De entrada tienes definido un ancho de 13.9em y un font-size de .9em en #opciones:

Código CSS:
Ver original
  1. #opciones {
  2. position:relative;
  3. float:left;
  4. left:32px;
  5. top:2px;
  6. width:13.9em;
  7. height:600px;
  8. margin:0;
  9. padding:1em .5em 2em .5em;
  10. background:#C6DAE1;
  11. border:2px solid #eeeeee;
  12. font-size:.9em;
  13. }

y en #opciones legend, fieldset un ancho de 14em y un font-size de 12px

Código CSS:
Ver original
  1. #opciones legend, fieldset{
  2. margin:auto;
  3. font-size:12px;
  4. text-align:left;
  5. width:14em;
  6. border-color:#CCC;
  7. }

o sea tienes un ancho del contenido (legend y fieldset) mayor que el contenedor (opciones), no es mucha la diferencia pero todo ayuda.

Depende del resto del diseño pero yo suprimiría el ancho en ambos casos, así se ajusta todo automáticamente.

Saludos.

  #7 (permalink)  
Antiguo 04/01/2011, 23:17
 
Fecha de Ingreso: junio-2010
Mensajes: 6
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Texto del fieldset se desborda del div en Firefox

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:

De entrada tienes definido un ancho de 13.9em y un font-size de .9em en #opciones:

Código CSS:
Ver original
  1. #opciones {
  2. position:relative;
  3. float:left;
  4. left:32px;
  5. top:2px;
  6. width:13.9em;
  7. height:600px;
  8. margin:0;
  9. padding:1em .5em 2em .5em;
  10. background:#C6DAE1;
  11. border:2px solid #eeeeee;
  12. font-size:.9em;
  13. }

y en #opciones legend, fieldset un ancho de 14em y un font-size de 12px

Código CSS:
Ver original
  1. #opciones legend, fieldset{
  2. margin:auto;
  3. font-size:12px;
  4. text-align:left;
  5. width:14em;
  6. border-color:#CCC;
  7. }

o sea tienes un ancho del contenido (legend y fieldset) mayor que el contenedor (opciones), no es mucha la diferencia pero todo ayuda.

Depende del resto del diseño pero yo suprimiría el ancho en ambos casos, así se ajusta todo automáticamente.

Saludos.

Probé como tu dices eliminando ambas propiedades en el css, pero el div se ensancha sobreponiéndose sobre el div de contenido y no es lo que necesito
  #8 (permalink)  
Antiguo 05/01/2011, 06:21
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Texto del fieldset se desborda del div en Firefox

aplique a /form legend/ la propiedad /white-space/
EL valor oportuno dejo que lo investigue y ya nos cuenta cómo le fue.
  #9 (permalink)  
Antiguo 07/01/2011, 22:59
 
Fecha de Ingreso: junio-2010
Mensajes: 6
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Texto del fieldset se desborda del div en Firefox

Excelente!muchas gracias =) el value que aplique es normal con esto ya se ha ajustado la leyenda dentro del div... solo un detalle me queda que es que el div de contenido tiene un leve desfase vertical hacia abajo podría ser de un milimetro aprox a simple vista(también sucede en iexplorer, pero que en chrome no se percibe, ¿que podría ser?

Etiquetas: 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 14:09.