Contenido responsive

linares843 · #1 (**permalink**) 21/11/2014, 07:36

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<body>
<section class="formulario">
    <p>Cont&aacute;ctanos!</p>
    <form action="send.php" method="post" name="contacto" id ="contacto" >
        <div class="name">
            Nombre:<p>(*)</p>
            <input name="nombre" value="" type="text" id="Nombre" size="20" maxlength="15" required>
        </div>
        <div class="e-mail">
            E-mail:<p>(*)</p>
            <input name="correoenvia" value="" type="text" onBlur="MM_validateForm('correoenvia','','NisEmail');return                                                  document.MM_returnValue" size="20" maxlength="30" required>
        </div>
        <div class="tlfn">
        Tel&eacute;fono:<p>(*)</p> 
        <input name="telefono" value="" type="text" onBlur="MM_validateForm('telefono','','R');return   document.MM_returnValue" size="20" maxlength="60" required>
        <br>
        </div>
        <div class="asunto">
        Asunto:<p>(*)<p> <input name="asunto" value="" type="text" onBlur="MM_validateForm('asunto','','R');return document.MM_returnValue" size="20" maxlength="60" required>
        <br>
        </div>
        <div class="msj">
        Mensaje
        <br>
        <textarea cols="57px" rows="9" name="mensaje" required></textarea>
        <br>
        </div>
        <div class="boton">
        <input type="image" src="images/BOTON ENVIAR.png" value="Enviar formulario">
        <!--<input type="image" src="images/BOTON BORRAR.png" value="Borrar datos">-->
        </div>
        </form>
</section>
 
</body>

y el css:

Código CSS:

Ver originalhtml {
    background:url(../fondo4.png) no-repeat fixed center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
 
.formulario{position:relative; background:#f37021; top:250px; left:-30px; width:500px; height:408px; border: 2px solid #FFF;                    border-radius: 25px;}
.formulario p{position:relative; left:50px; top:-20px; font-family:Verdana, Geneva, sans-serif, "Futura ND"; font-size:30px; color:#FFF; font-style:oblique;}
 
.name{position:relative; left:50px; float:left; top:-50px; font-family:Verdana, Geneva, sans-serif, "Futura ND"; font-size:18px;}
.name p{color:#F00; font-size:18px; position:relative; top:-43px; left:80px;}
.name input{position:relative; width:200px; height:30px; top:-50px;}
 
.e-mail{position:relative; float:right; top:-48px; left:-30px; font-family:Verdana, Geneva, sans-serif, "Futura ND"; font-size:18px;}
.e-mail p{color:#F00; font-size:18px; position:relative; top:-41px; left:65px;}
.e-mail input{position:relative; width:200px; height:30px; top:-52px;}
 
.tlfn{position:relative; float:left; top:-90px; left:50px; font-family:Verdana, Geneva, sans-serif, "Futura ND"; font-size:18px;}
.tlfn p{color:#F00; font-size:18px; position:relative; top:-43px; left:85px;}
.tlfn input{position:relative; width:200px; height:30px; top:-50px; left:0px;}
 
.asunto{position:relative; float:right; top:-90px; left:-23px; font-family:Verdana, Geneva, sans-serif, "Futura ND"; font-size:18px}
.asunto p{color:#F00; font-size:18px; position:relative; top:-43px; left:70px;}
.asunto input{position:relative; width:200px; height:30px; top:-7px; left:-70px;}
 
.msj{position:relative; float:left; top:-150px; left:50px; font-family:Verdana, Geneva, sans-serif, "Futura ND"; font-size:18px;}
.msj input{position:relative; width:200px; height:30px; top:-50px; left:0px; max-width:100px;}
.msj textarea {resize: none; }
.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??

MLenders · #2 (**permalink**) 01/12/2014, 05:03

Yo te recomendaria que utilizases un reseteador de css antes de incluir tus propios estilos.
Aqui puedes sacar algo de info: http://librosweb.es/css_avanzado/capitulo_2.html