Hola gente:
Resulta que vengo luchando con la familia IE, la primer batalla la voy ganando pues realizé la maqueta, pero a la hora de crear un formulario me encuentro con unos descuadres.
Aquí el codigo completo:
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
#formu {
margin:23px 10px 0 0;
padding:0;
border:none;
}
#formu fieldset{
border:none;
padding:0;
}
#nombre, #email {
background-color:#eaeaea;
border-radius: 5px;
-moz-border-radius: 5px; /* Navegadores Firefox o Gecko */
-webkit-border-radius: 5px; /* Navegadores Safari o Webkit */
padding:15px 10px;
}
#email{
margin-left:20px;
}
#nombre:hover, #email:hover {
background-color:#ccc;
}
#formu p {
background-color:#eaeaea;
border-radius: 5px;
-moz-border-radius: 5px; /* Navegadores Firefox o Gecko */
-webkit-border-radius: 5px; /* Navegadores Safari o Webkit */
padding:0 0 0 10px;
margin-top:20px;
}
#formu p:hover {background-color:#ccc;}
#boton {
position:relative;
right:-550px;
top:-70px;
}
#formu label{
background-color:;
margin:10 0 10 0px;
padding:10 0 10 0px;
}
#formu input {
margin:5px;
padding:5px;
}
.inputClass {
width:100px;
margin-top:15px;
}
.inputClassComent{
position:relative;
top:-50px;
width:100px;
margin-top:15px;
}
#textArea{
padding:14px;
margin:14px;
}
</style>
</head>
<body>
<form id="formu" action="" method="post">
<fieldset>
<span id="nombre">
<label>
<span class="inputClass">Nombre</span>
<input type="text" name="nombre" size="25"/>
</label>
</span>
<span id="email">
<label>
<span class="inputClass">Email</span>
<input type="text" name="email" size="25"/>
</label>
</span>
<p>
<label>
<span class="inputClassComent">Consulta</span>
<textarea id="textArea" name="texto" cols="46">
</textarea>
</label>
</p>
<input id="boton" type="submit" name="enviar" value="Enviar"/>
</fieldset>
</form>
</body>
</html>
Necesito ayuda para saber que propiedad me está alterando IE. ¿será position:relative? ¿algún problema con margin y/o padding?
Si es margin y/o padding, ¿porque, si no tengo elementos flotados?
Aquí dejo la captura de como se ve en IE 6 y 7:
Desde ya muchas gracias, saludos!
p/d: Aclarar que utilizo border-radius aceptando conforme que se visualizarán bordes cuadrados para IE.