Estoy diseñando un diseño de formulario para ser publicado en muchas páginas dentro de un sistema en línea. Un devoto usuario de tablas para este propósito durante muchos años, ahora estoy acostumbrado a usar etiquetas CSS + para esto.Alineación vertical de la etiqueta CSS con los campos de entrada
Una cosa que todavía no he podido dominar es la forma en que los diferentes navegadores rellenan & colocan la etiqueta relativa al campo de entrada. Daré un ejemplo de código, más una imagen de cerca de cómo se renderiza en cada navegador (IE = IE9).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>HTML template</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<style>
body {
font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
font-size:13px;
font-style:normal;
font-weight:normal;
letter-spacing:normal;
margin:20px;
}
input {
font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
border:solid 1px #666;
width:150px;
}
.fld {
}
.usr {
border:solid 1px red;
}
p {
}
</style>
</head>
<body>
<p>
<label class="usr" for="email">Email*</label>
<input class="fld required email" type="text" name="email" id="email" value="Capital Letter">
</p>
</body>
</html>
OK - ahora puedo publicar una foto - que aquí es lo que parece después de los cambios de Ahmed Masud. Tenía razón: el archivo reset.css que tenía (desde http://html5reset.org/) no tenía relleno en el elemento de entrada. Sin embargo, incluso después de aplicar los cambios, todavía hay una variación en la alineación de la base del texto en la etiqueta en comparación con la de la entrada. Ahora Firefox está a nivel muerto, y para IE & Chrome, el texto de la etiqueta es 1px más alto.
Si quito el enlace a reset.css, las cosas cambian de nuevo: Chrome se convierte en nivel muertos, IE pone la etiqueta de 1 píxel más alto que el texto de entrada, Firefox 1px más bajo que el texto de entrada. Vea a continuación:
Debo señalar que se trata de un diseño muy básico, sólo para tratar de diagnosticar el problema. Haré que todo se vea mejor más tarde. Pero primero necesito saber cómo alinear todo mi texto en todos los navegadores con una sola solución CSS.
puede publicar su reset.css también pl ¿facilitar? –
Es de html5reset.org - agregó el enlace anterior, junto con la respuesta a su respuesta a continuación. –