Texto del fieldset se desborda del div en Firefox

kmpx · #1 (**permalink**) 29/12/2010, 12:21

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

kseso? · #2 (**permalink**) 30/12/2010, 07:45

Códigos implicados o enlace a la página.
Recuerde que este es el foro de css, no de diseño gráfico.

kmpx · #3 (**permalink**) 30/12/2010, 11:37

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

kseso? · #4 (**permalink**) 31/12/2010, 07:31

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.

kmpx · #5 (**permalink**) 04/01/2011, 10:29

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

jomaruro · #6 (**permalink**) 04/01/2011, 15:55

Hola:

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

Código CSS:

Ver original#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;
}

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

Código CSS:

Ver original#opciones legend, fieldset{
margin:auto;
font-size:12px;
text-align:left;
width:14em;
border-color:#CCC;
}

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.

kmpx · #7 (**permalink**) 04/01/2011, 23:17

Cita:

Iniciado por jomaruro

Hola:

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

Código CSS:

Ver original#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;
}

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

Código CSS:

Ver original#opciones legend, fieldset{
margin:auto;
font-size:12px;
text-align:left;
width:14em;
border-color:#CCC;
}

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

kseso? · #8 (**permalink**) 05/01/2011, 06:21

aplique a /form legend/ la propiedad /white-space/
EL valor oportuno dejo que lo investigue y ya nos cuenta cómo le fue.

kmpx · #9 (**permalink**) 07/01/2011, 22:59

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?