Salto de Línea mareante en IE

vgonga1986 · #1 (**permalink**) 11/05/2011, 09:26

Buenas,

espero que me puedan ayudar con un problema de diferencias entre IE y Firefox que me surgió maquetando con CSS. He intentado simplificar al máximo el código (aunque parezcan innecesarios los padding y margin os aseguro que son útilies con el resto del código), lo pongo a continuación:

HTML:

Código:

<html>
<head>
	<title>CECA- BugTracker</title>
	<link rel="StyleSheet" type="text/css" href="style\test.css" />
</head>
<body>
	<div id="content" class="curved">
		<h2 class="content-title">Titulo</h2>
		<div class="content-body">
			<form action="" method="POST">
				<table>
				<tr>
					<td class="form-entry">Entrada:</td>
					<td class="form-field"><input type="text" name="Entrada"/></td>
				</tr>
				<tr>
					<td class="form-entry">Entrada:</td>
					<td class="form-field"><input type="text" name="Entrada"/></td>
				</tr>
				</table>							
			</form>
		</div>
	</div>
</body>
</html>

CSS:

Código:

/* Content */
#content {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	border: 1px solid white;
	background-color: pink;
}

.content-title {
	padding: 2px 10px 2px 10px;
	margin: 0px 0px 0px 0px;
	background-color: red;
}

.content-body {
	margin: 0px 0px 0px 0px;
	background-color: black;
}

form {
	background-color: white;
}

/* Form */
form table {
	border-collapse: collapse;
	width: 100%;
}

.form-entry {
	padding: 1px 4px 1px 10px;
	margin: 0px 0px 0px 0px;
	background-color: green;
}

.form-field {
	padding: 2px 1px 2px 10px;
	margin: 0px 0px 0px 0px;
	background-color: blue;
}

Si visualizáis lo que pasé en Firefox está todo perfecto, pero al abrirlo en IE aparece mágicamente un salto de línea entre el título y la tabla. He puesto cada elemento con un color de fondo diferente para ver si encontraba el problema, pero no parece haber ninguno y me estoy volviendo loco, ya no sé qué más probar. A ver si alguien me puede echar una mano, sería de gran ayuda.

Por indicar un poco, mi impresión es que es tema de poner un float bien en algún lado, pero no doy con él.

Gracias de antemano y un saludete.

Tecna · #2 (**permalink**) 11/05/2011, 10:37

Buenas,

sólo hay que ir quitando cosas hasta ver que elemento es el que causa el problema y en este caso es el margen del form. Eso no te pasaría si usaras un reset para eliminar los valores por defecto que tiene cada navegador y que son diferentes. Así te evitas diferencias entre navegadores y queda el código más limpio, te ahorrarías por ejemplo todas las líneas en las que declaras la propiedad margin a cero, que puedes hacerlo de forma simplificada poniendo sólo un valor cuando se repite para los 4 lados, o dos si se repite en lados alternos o incluso 3, pero los 4 sólo cuando sean diferentes y puedes hacerlo para todos los elementos a la vez usando el selector universal asterisco, es decir * {margin: 0;}
Supongo que en el código original si que tendrás un boton submit porque si no el formulario no será accesible. Sería aconsejable usar una etiqueta label asociada a cada input y eliminar la tabla si sólo se usa para dar estilo al formulario.

vgonga1986 · #3 (**permalink**) 12/05/2011, 02:10

Muchas gracias, Tecna.

Con el reset que comentas se soluciona todo. Sí sabía que los navegadores tenían valores por defecto para los márgenes de cada elemento, pero la verdad que nunca había usado el selector universal para resetearlos todos, sino que iba reseteando según me salían problemas. Así queda mucho más limpio.

Te agradezco también los consejos, el form tiene submit, pero más abajo, sólo puse los dos primeros input y lo de la tabla, sé que no es exactamente maquetado CSS, pero después del form hay una lista con los resultados y, la verdad, me resulta mucho más cómodo para que quede todo alineado.

En cuanto a lo de los margin con 4 valores, es una manía que cogí hace tiempo, porque ponía sólo uno, luego tenía que cambiar y tenía que modificarlo, luego 4 y otra vez. Ahora siempre que pongo un margin o un padding, pongo los 4 valores, para que las modificaciones sean sólo cambiar los números. Lo veo más cómodo, pero ya te digo, que son sólo manías.

Bueno, muchas gracias otra vez y suerte. Un saludo.