Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/02/2010, 10:45
Avatar de cristian_cena
cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
formulario se descuadra en IE 6 y 7

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.