Ver Mensaje Individual
  #1 (permalink)  
Antiguo 21/11/2014, 07:36
linares843
 
Fecha de Ingreso: noviembre-2014
Mensajes: 14
Antigüedad: 9 años, 5 meses
Puntos: 0
Contenido responsive

Buenas tengo un pequeño problema con mi contenido.

Tengo una web donde puse una plantilla de muy pronto estrenaremos nuestro site, y contiene un pequeño formulario para que dejen sus correos. ya eso esta funcionando, el problema es que el formulario en algunos navegadores aparece bien, y en otros aparece arriba y la caja de mensaje se agranda..

alguna solución??
Mi código:
Código HTML:
Ver original
  1. <section class="formulario">
  2.     <p>Cont&aacute;ctanos!</p>
  3.     <form action="send.php" method="post" name="contacto" id ="contacto" >
  4.         <div class="name">
  5.             Nombre:<p>(*)</p>
  6.             <input name="nombre" value="" type="text" id="Nombre" size="20" maxlength="15" required>
  7.         </div>
  8.         <div class="e-mail">
  9.             E-mail:<p>(*)</p>
  10.             <input name="correoenvia" value="" type="text" onBlur="MM_validateForm('correoenvia','','NisEmail');return                                                  document.MM_returnValue" size="20" maxlength="30" required>
  11.         </div>
  12.         <div class="tlfn">
  13.         Tel&eacute;fono:<p>(*)</p>
  14.         <input name="telefono" value="" type="text" onBlur="MM_validateForm('telefono','','R');return   document.MM_returnValue" size="20" maxlength="60" required>
  15.         <br>
  16.         </div>
  17.         <div class="asunto">
  18.         Asunto:<p>(*)<p> <input name="asunto" value="" type="text" onBlur="MM_validateForm('asunto','','R');return document.MM_returnValue" size="20" maxlength="60" required>
  19.         <br>
  20.         </div>
  21.         <div class="msj">
  22.         Mensaje
  23.         <br>
  24.         <textarea cols="57px" rows="9" name="mensaje" required></textarea>
  25.         <br>
  26.         </div>
  27.         <div class="boton">
  28.         <input type="image" src="images/BOTON ENVIAR.png" value="Enviar formulario">
  29.         <!--<input type="image" src="images/BOTON BORRAR.png" value="Borrar datos">-->
  30.         </div>
  31.         </form>
  32.  
  33. </body>


y el css:

Código CSS:
Ver original
  1. html {
  2.     background:url(../fondo4.png) no-repeat fixed center;
  3.     -webkit-background-size: cover;
  4.     -moz-background-size: cover;
  5.     -o-background-size: cover;
  6.     background-size: cover;
  7. }
  8.  
  9. .formulario{position:relative; background:#f37021; top:250px; left:-30px; width:500px; height:408px; border: 2px solid #FFF;                    border-radius: 25px;}
  10. .formulario p{position:relative; left:50px; top:-20px; font-family:Verdana, Geneva, sans-serif, "Futura ND"; font-size:30px; color:#FFF; font-style:oblique;}
  11.  
  12. .name{position:relative; left:50px; float:left; top:-50px; font-family:Verdana, Geneva, sans-serif, "Futura ND"; font-size:18px;}
  13. .name p{color:#F00; font-size:18px; position:relative; top:-43px; left:80px;}
  14. .name input{position:relative; width:200px; height:30px; top:-50px;}
  15.  
  16. .e-mail{position:relative; float:right; top:-48px; left:-30px; font-family:Verdana, Geneva, sans-serif, "Futura ND"; font-size:18px;}
  17. .e-mail p{color:#F00; font-size:18px; position:relative; top:-41px; left:65px;}
  18. .e-mail input{position:relative; width:200px; height:30px; top:-52px;}
  19.  
  20. .tlfn{position:relative; float:left; top:-90px; left:50px; font-family:Verdana, Geneva, sans-serif, "Futura ND"; font-size:18px;}
  21. .tlfn p{color:#F00; font-size:18px; position:relative; top:-43px; left:85px;}
  22. .tlfn input{position:relative; width:200px; height:30px; top:-50px; left:0px;}
  23.  
  24. .asunto{position:relative; float:right; top:-90px; left:-23px; font-family:Verdana, Geneva, sans-serif, "Futura ND"; font-size:18px}
  25. .asunto p{color:#F00; font-size:18px; position:relative; top:-43px; left:70px;}
  26. .asunto input{position:relative; width:200px; height:30px; top:-7px; left:-70px;}
  27.  
  28. .msj{position:relative; float:left; top:-150px; left:50px; font-family:Verdana, Geneva, sans-serif, "Futura ND"; font-size:18px;}
  29. .msj input{position:relative; width:200px; height:30px; top:-50px; left:0px; max-width:100px;}
  30. .msj textarea {resize: none; }
  31. .boton{position:relative; float:left; top:-145px; left:375px;}

esta es mi web:
http://playgroundcaracas.com/

el formulario en mi pc en chrome se ve bien pero en otras versiones y en los demás navegadores se ve mal...

alguna idea de como podría acomodarlo??

Última edición por pzin; 21/11/2014 a las 12:09 Razón: combinar temas