El problema lo tengo con los anchos, pero si miras los estilos, los
elementos de texto input y textarea tienen anchura especificada, al igual
que los label.
He añadido
*, html{
margin:0;
padding:0;
}
al principio de mi hoja de estilos para evitar los márgenes propios de IE.
Un saludo.
----- Original Message -----
From: "Javier Trejo" <[EMAIL PROTECTED]>
To: "'Ovillo, la lista de CSS en castellano'" <[email protected]>
Sent: Monday, April 02, 2007 5:27 PM
Subject: Re: [Ovillo] anchura formulario
El "problema" que tenés está en la forma en que el IE y FF dibujan los
elementos del formulario.
Una posible solución, sería que a los elementos de texto (input, textarea)
les especifiques un tipo de fuente; en cuyo caso se estandarizarían los
altos ysi les especificás un width tendrás el ancho. Con los radio no vas a
tener ningún problema.
Por otro lado, con respecto a los label, lo que podés hacer es lo mismo de
fuente / width y te aconsejo especificar un padding y margin a 0 a nivel
general del CSS para que no te afecten los margenes propios y los padding
que trae IE.
Espero esta solución sea úlil
Saludos,
Javier Trejo
----------------------------------------------
[EMAIL PROTECTED]
www.tsinformatica.com.ar
TEL.: 4543-4550
CEL.: 15-6485-7734
MSN: [EMAIL PROTECTED]
SKYPE: javier.trejo
-----Mensaje original-----
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de Andres
Enviado el: Lunes, 02 de Abril de 2007 12:20
Para: Ovillo, la lista de CSS en castellano
Asunto: [Ovillo] anchura formulario
No consigo que la anchura del formulario sea igual en Explorer que en
Firefox y Opera. ¿Cual es el problema?.
ENLACE: http://www.arkitera.es/web/contacto/contacto.htm
HTML:
<div class="form">
<form id="myform" class="cssform" action="">
<p>
<label for="user">Nombre</label>
<input type="text" id="user" value="" /> </p>
<p>
<label for="emailaddress">Correo electrónico:</label> <input type="text"
id="emailaddress" value="" /> </p>
<p>
<label for="comments">Asunto:</label>
<input type="radio" name="hobby"/>
Más información sobre un proyecto<br /> <input type="radio"
name="hobby" class="threepxfix" /> Más informacion sobre un socio <br
/> <input type="radio" name="hobby" class="threepxfix" /> Visitar un
edificio <br /> <input type="radio" name="hobby" class="threepxfix" />
Concertar una cita <br /> </p>
<p>
<label for="comments">Comentarios:</label>
<textarea name="textarea" cols="25" rows="5" id="comments"></textarea> </p>
<div style="margin-left: 150px;">
<input type="submit" value="Submit" /> <input type="reset" value="reset"
/>
</div>
</form>
</div>
<div id="foto_contacto">
<img src="estudio2.jpg" alt="Foto del estudio" /> </div>
CSS:
form{
float:left;
margin-left:37px;
}
cssform p{
width: 425px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 150px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
}
cssform label{
font-weight: bold;
float: left;
margin-left: -150px; /*width of left column*/
width: 145px; /*width of labels. Should be smaller than left column (155px)
to create some right margin*/ }
cssform input[type="text"]{ /*width of text boxes. IE6 does not understand
this attribute*/
width: 180px;
}
cssform textarea{
width: 250px;
height: 150px;
}
/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug:
http://www.positioniseverything.net/explorer/threepxtest.html
*/
* html .threepxfix{
margin-left: 3px;
}
#foto_contacto{
padding-left:15px;
float:left;
}
#foto_contacto img{
width:449px;
}
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected] Puedes
modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
