CSS - problema elemento legend alineamiento

   
Vista:

problema elemento legend alineamiento

Publicado por isaac isaacaaron79@live.com (4 intervenciones) el 06/11/2014 20:24:59
Hola comunidad saludos a tod@s.

¿Alguien sabe que le pasa al elemento legend?

Estoy intentado aplicarle estilos css a este elemento leyend que tengo dentro de fieldset, en concreto quiero alinearlo, pero de todas las maneras que pongo no hace caso. Según la especificación es un elemento de bloque, le he puesto un ancho y margin auto y nada, he probado también a ponerle un text-align pero nada tampoco. Se supone que si es un elemento de bloque con margin auto debería centrarse, claro esta con su ancho especificado. En chrome por ejemplo este elemento sale centrado por defecto, en IE y firefox sale a la izquierda. Si nos fijamos también en los valores que le pone internet explorer 11 le aplica un display:inline y después un width:24px,completamente contradictorio. Los demás navegadores si le aplican un display:block.

¿Que le pasa a esta etiqueta que se pasa los estilos css por donde quiere?
 
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

problema elemento legend alineamiento

Publicado por xve (352 intervenciones) el 07/11/2014 08:52:05
Hola Isaac, nos puedes mostrar el código?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

problema elemento legend alineamiento

Publicado por isaac isaacaaron79@live.com (4 intervenciones) el 07/11/2014 11:48:32
Código
1
2
3
4
5
6
7
8
9
10
11
12
13
<form action="ejemplo.php">
<fieldset>
<legend>Información personal</legend>
Nombre: <input type="text" name="pnombre" />
Dirección: <input type="text" name="pdireccion" />
Teléfono: <input type="text" name="ptelefono" />
</fieldset>
<fieldset>
<legend>Información laboral</legend>
Dirección: <input type="text" name="ldireccion" />
Teléfono: <input type="text" name="ltelefono" />
</fieldset>
</form>

Comentar que he estado buscando como un loco este problema y he averiguado algo. Investigando en el inspector de elementos de firefox. Firefox le aplica una propiedad propietaria que al desactivarla deja alinear el texto, eso si, le quita casi todo el borde superior que aplica fieldset. Esto quiere decir que firefox le aplica algunas reglas que hacen que las que le pongamos nosotros las ignoren. Como comente anteriormente chrome no da problemas.

width:-moz-fit-content
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

problema elemento legend alineamiento

Publicado por xve (352 intervenciones) el 07/11/2014 20:58:52
Hola Isaac, me pasa exactamente lo mismo que ha ti... y no entiendo muy bien porque pasa...

He revisado w3c , y no se ver nada que diga que no es posible... como comentas, en Chrome, funciona perfectamente, pero en Firefox no!!!
http://www.w3.org/TR/html5/forms.html#the-legend-element

Voy a ver si averiguo alguna otra cosa...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

problema elemento legend alineamiento

Publicado por isaac (4 intervenciones) el 07/11/2014 21:59:13
hola de nuevo, llevo toda la tarde y sigo sin saber que le pasa, es algo muy raro la verdad, en la especificacion nada dice que no se pueda usar un text-align ni nada. He encontrado algo que puede ser la explicacion a este motivo, yo de ingles se poco la verdad asi que te lo paso a ver si sacas algo del tema o alguien que pueda ayudarnos.

http://html5doctor.com/legend-not-such-a-legend-anymore/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar