Foros del Web » Creando para Internet » CSS »

formulario se descuadra en IE 6 y 7

Estas en el tema de formulario se descuadra en IE 6 y 7 en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/02/2010, 10:45
Avatar de 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.
  #2 (permalink)  
Antiguo 16/02/2010, 23:47
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 14 años, 8 meses
Puntos: 137
Respuesta: formulario se descuadra en IE 6 y 7

Hola, ami parecer era que tienes "<span>" como si fuesen elementos en bloque... por eso en ie se corta donde empieza y termina el texto
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 type="text/css">
#formu { 
margin:23px 10px 0 0;
padding:0; 
border:none;
}
#formu fieldset{
border:none;
padding:0;
}
#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:5px 15px;margin:0 20px 20px 0;float:left;width:auto;line-height:40px;
}
#formu p:hover{background-color:#ccc;}
#formu input#boton {
/*position:relative;
right:-550px;
top:-70px;*/
/**/float:left;width:auto;margin-top:30px;
}
#formu label{
background-color:;
margin:10 0 10 0px;
padding:10 0 10 0px;
/**/float:left;width:auto;
}
#formu input {
margin:5px;
padding:5px;
/**/float:left;width:auto;
}
.inputClass {
width:100px;
margin-top:15px;
}
.inputClassComent{
position:relative;
top:-50px;
width:100px;
margin-top:15px;
}
#textArea{
padding:14px;
margin:14px;
/**/height:47px;float:left;width:auto;
} 
/**/#formu p.f_none label{height:107px;line-height:100px;}
</style>
</head>
<body>
<form id="formu" action="" method="post">
    <fieldset>
        <p>
            <label>Nombre</label>
            <input type="text" name="nombre" size="25"/>            
        </p>
        <p>
            <label>Email</label>
            <input type="text" name="email" size="25"/>
        </p>
        <p class="f_none">
            <label>Consulta </label>
            <textarea id="textArea" name="texto" cols="46"></textarea>
            <input id="boton" type="submit" name="enviar" value="Enviar"/>
        </p>        
    </fieldset>
</form>   
</body>
</html>
bueno solo vi una "solucion" y era flotar algunos elmentos... aver si te sirve... chao :P
__________________
Toroflix - movies.
  #3 (permalink)  
Antiguo 17/02/2010, 10:52
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: formulario se descuadra en IE 6 y 7

Hola alexk, muchisimas gracias por la ayuda, funciona a la perfección!! Tendré cuidado con los span para IE en el futuro. Una duda, width:auto; lo utilizas para activar el hasLayout?

Saludos y gracias che! un abrazo!!
  #4 (permalink)  
Antiguo 17/02/2010, 11:59
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 14 años, 8 meses
Puntos: 137
Respuesta: formulario se descuadra en IE 6 y 7

nop... para activarlo seria asignarle un valor que no sea ese jeje...
pero como no sabia el ancho que usarias le puse auto...
porque segun una regla por alli (o me la invente) al flotar un elemento este debe tener la propiedad width que le acompañe.
y te ahorras una "advertencia" cuando valides tu CSS :P y que bueno que te sirva...
__________________
Toroflix - movies.
  #5 (permalink)  
Antiguo 17/02/2010, 13:27
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: formulario se descuadra en IE 6 y 7

Aah! ok! gracias. nos vemos.
  #6 (permalink)  
Antiguo 14/06/2010, 10:08
 
Fecha de Ingreso: junio-2010
Mensajes: 1
Antigüedad: 13 años, 9 meses
Puntos: 0
Respuesta: formulario se descuadra en IE 6 y 7

Hola, escribo para ver si alguien me puede ayudar. Tengo una web que se ve bien en todos los navegadores que he probado menos en Internet Explorer. En vez de pintar la cabecera al principio deja un buen trozo en blanco, luego pinta el menú y deja otro hueco grande en blanco. Mi idea es que la página salga centrada para una resolución de 800x600.

Os pego el código. Lo he limpiado un poco para que se pueda entender mejor.

Código HTML:
<body onload="paginas('Home.aspx','divContenido', 'liContenido')">
    <form id="form1" action="">
    <div align="center" style="height:580px; vertical-align:top">
        <table id="tablaPrincipal" style="width:780px; height:580px; vertical-align:top" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td align="center" valign="middle">
                <table style="width:780px; height:580px; vertical-align:top">
                <tr id="filaCabecera" style="height:120px">   
                    <td>
                        <form id="formCabecera" action ="">
                        
                        <table id="tablaCabecera">
                        
                            <tr>                            
                                <td style="width:189px"><img src="imagenes/logo.png" 
                                        /></td>                                                                                                                              
                                <td id="columnaMenu" style="width:591px">  
                                    <div id="menu">
                                        <ul  id="menuCabecera" class="menu3">
                                            <li id="liContenido" onclick="paginas('Home.aspx','divContenido', this)"><a ><b>Home</b></a></li>
                                            <li onclick="paginas('Servicios.aspx','divContenido', this)"><a><b>Servicios</b></a></li>
                                            <li onclick="paginas('EnConstruccion.aspx','divContenido', this)"><a><b>Eventos</b></a></li>                                        
                                            <li onclick="paginas('EnConstruccion.aspx','divContenido', this)"><a><b>Enlaces</b></a></li>
                                            <li onclick="paginas('Contacto.aspx','divContenido', this)"><a><b>Contacto</b></a></li>
                                        </ul>	
                                    </div>  	                
                                </td>
                            </tr>

                        </table>
                        </form>
                    </td>
                </tr>

                <tr id="filaCentral">
                    <td>
                        <table id="tablaCentral">
                            <tr>
                                <td style="width:480px">
                                    <div id="divContenido"></div>
                                </td>

                                <td style="width:200px">
                                
                                    <div>
                                        <h1>Eventos</h1>
                                        <div>
                                            <div><img src="#" width="14" height="14" /></a><span> </span></div>
                                            <div><a><img src="#" width="14" height="14"/></a><span></span></div>
                                        </div>
                                        <div>
	                                        <ul>
                                                <li>
                                                    <img src="#"/>
                                                    <span>
														<a href="#" target="_blank"></a>
                                                    </span>
                                                    <span>

                                                    </span>
                                                    <span><strong></strong></span>        
                                                </li>
                                                <li>
        	                                        <img src="#" />
                                                    <span class="NewsTitle">
                                                    <a href="#" target="_blank"></a>
                                                    </span>
                                                    <span>
                                                   </span>
                                                   <span><strong></strong></span>
                                                </li>
                                                <li>
                                                    <img src="#"/>
                                                    <span>
                                                    <a href="#" target="_blank"></a>
                                                    </span>
                                                    <span>
                                                    </span>
                                                   <span><strong></strong></span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                
                <tr id="filaPie" style="height:60px">
                    <td>  
                        <table style="height:30px">
                            <tr>
                                <td style="text-align:right">
                                    <span></span>
                                    <a href="#" target="_blank"> <img src="#"  /> </a>
                                    <a href="#" target="_blank"> <img src="#"/></a>
                                    <a href="#" target="_blank"> <img src="#"/> </a>
                                    <a href="#" target="_blank"> <img src="#"/> </a>
                                </td>
                            </tr>
                        </table>
                        <table style="height:30px; background-color:#5F605F">
                            <tr>
                                <td style="text-align: center"><span class="enlaces-pie"></span></td>
                                <td style="text-align: center"><span class="enlaces-pie"></span></td>
                                <td style="text-align: center"><span class="enlaces-pie"></span></td>
                            </tr>
                        </table>
                        
                        
                        </td>
                    </tr>
                </table> 
                </td>
            </tr>
        </table>       
        
    </div>
    </form>
</body> 

Etiquetas: descuadra, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:22.