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.