Hola, soy nuevo en el foro y me gustaría me ayudarais con el problema que tengo.
Estoy diseñando un formulario con los campos necesarios y parece que todo está OK. Se ve como quiero tanto en Mozilla como en IE9. El problema viene cuando lo compruebo con el Google Chrome. Las ventanas de para la introducción de los datos aumentan de tamaño. Si fijo la propiedad overflow: auto; es cuando se descontrola el tamaño, pero solo en Chrome; pero si no la pongo, en IE9, aparece en la ventana del comentario la barra de scroll. Si quito el padding y mantengo el overflow de la hoja de estilos que define la entrada de datos el formulario se bien en Chrome pero no en Mozilla y en IE9.
Agradezco la ayuda de antemano.
El código fuente html es (formulario.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<link href="css/formulario.css" rel="stylesheet" type="text/css" />
</head>
<body data-twttr-rendered="true">
<section class="menu_opcion">
<form class="contacto" action="enviar.php" method="post">
<ul>
<li>
<label for="nombre">Nombre y Apellidos (*)</label>
<input type="text" name="nombre" id="nombre" required="required" class="nav_menu" /><br>
</li>
<li>
<label for="telefono">Teléfono (*)</label>
<input name="telefono" id="telefono" type="text" required="required" class="nav_menu" /><br>
</li>
<li>
<label for="email">E-mail (*)</label>
<input name="email" id="email" type="email" required="required" class="nav_menu" /><br>
</li>
<li>
<label for="asunto">Asunto (*)</label>
<input name="asunto" id="asunto" type="text" required="required" class="nav_menu" /><br>
</li>
<li>
<label for="comentario">Comentario (*)</label>
<textarea name="comentario" rows="10" class="nav_menu"></textarea>
</li>
<li>
<input type="submit" value="Enviar" class="enviar nav_menu" />
</li>
<small>(*) Campos obligatorios</small>
</ul>
</form>
</section>
</body>
</html>
Y el archivo de estilos es (formulario.css):
@charset "utf-8";
/* CSS Document */
/************** VALORES A CERO **************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
background: transparent;
text-decoration: none;
padding: 0px;
}
ul,li {
list-style: none; /* QUITAR PUNTOS <ul,li> */
}
body, html{
background: #E6E6E6;
font: 13px/17px Arial, Helvetica, sans-serif;
overflow-x: hidden;
z-index:1000;
line-height: 1;
}
.nav_menu{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.menu_opcion{
position: relative;
width: 1000px;
margin: 0px auto;
clear: both;
}
.contacto{
float: left;
position:relative;
margin: 30px 30px 10px;
}
.contacto small{
font-size: 10px;
margin-top: 5px;
}
.contacto ul{
margin: 15px 0 0 0;
}
.contacto li{
line-height: 35px;
text-align: right;
position: relative;
}
.contacto label{
width: 135px;
display: block;
float: left;
text-align: right;
padding-right: 30px;
}
.contacto input,
.contacto textarea{
font: 11px/11px Arial, Helvetica, sans-serif;
width: 340px;
padding: 7px;
resize: none;
color: white;
background: black;
overflow: auto;
}
.contacto .enviar{
background: #7d3100;
font: bold 11px/11px Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: white;
cursor: pointer;
width: 100px;
height: 30px;
outline: none;
padding: 0;
}
.contacto .enviar:hover{
background: #7d3100;
color: #DB5600;
}
Estoy diseñando un formulario con los campos necesarios y parece que todo está OK. Se ve como quiero tanto en Mozilla como en IE9. El problema viene cuando lo compruebo con el Google Chrome. Las ventanas de para la introducción de los datos aumentan de tamaño. Si fijo la propiedad overflow: auto; es cuando se descontrola el tamaño, pero solo en Chrome; pero si no la pongo, en IE9, aparece en la ventana del comentario la barra de scroll. Si quito el padding y mantengo el overflow de la hoja de estilos que define la entrada de datos el formulario se bien en Chrome pero no en Mozilla y en IE9.
Agradezco la ayuda de antemano.
El código fuente html es (formulario.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<link href="css/formulario.css" rel="stylesheet" type="text/css" />
</head>
<body data-twttr-rendered="true">
<section class="menu_opcion">
<form class="contacto" action="enviar.php" method="post">
<ul>
<li>
<label for="nombre">Nombre y Apellidos (*)</label>
<input type="text" name="nombre" id="nombre" required="required" class="nav_menu" /><br>
</li>
<li>
<label for="telefono">Teléfono (*)</label>
<input name="telefono" id="telefono" type="text" required="required" class="nav_menu" /><br>
</li>
<li>
<label for="email">E-mail (*)</label>
<input name="email" id="email" type="email" required="required" class="nav_menu" /><br>
</li>
<li>
<label for="asunto">Asunto (*)</label>
<input name="asunto" id="asunto" type="text" required="required" class="nav_menu" /><br>
</li>
<li>
<label for="comentario">Comentario (*)</label>
<textarea name="comentario" rows="10" class="nav_menu"></textarea>
</li>
<li>
<input type="submit" value="Enviar" class="enviar nav_menu" />
</li>
<small>(*) Campos obligatorios</small>
</ul>
</form>
</section>
</body>
</html>
Y el archivo de estilos es (formulario.css):
@charset "utf-8";
/* CSS Document */
/************** VALORES A CERO **************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
background: transparent;
text-decoration: none;
padding: 0px;
}
ul,li {
list-style: none; /* QUITAR PUNTOS <ul,li> */
}
body, html{
background: #E6E6E6;
font: 13px/17px Arial, Helvetica, sans-serif;
overflow-x: hidden;
z-index:1000;
line-height: 1;
}
.nav_menu{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.menu_opcion{
position: relative;
width: 1000px;
margin: 0px auto;
clear: both;
}
.contacto{
float: left;
position:relative;
margin: 30px 30px 10px;
}
.contacto small{
font-size: 10px;
margin-top: 5px;
}
.contacto ul{
margin: 15px 0 0 0;
}
.contacto li{
line-height: 35px;
text-align: right;
position: relative;
}
.contacto label{
width: 135px;
display: block;
float: left;
text-align: right;
padding-right: 30px;
}
.contacto input,
.contacto textarea{
font: 11px/11px Arial, Helvetica, sans-serif;
width: 340px;
padding: 7px;
resize: none;
color: white;
background: black;
overflow: auto;
}
.contacto .enviar{
background: #7d3100;
font: bold 11px/11px Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: white;
cursor: pointer;
width: 100px;
height: 30px;
outline: none;
padding: 0;
}
.contacto .enviar:hover{
background: #7d3100;
color: #DB5600;
}