jajaj ¿Así o más directo?.
Primero, agregar a
Código :
h6 {
color:#FFFFFF;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
text-align:left;
}
esto:
Código :
margin:0;
Segundo. El espacio que aún queda, se debe a que, en firefox, el contenedor "main" no cubre la imagen de clase "alineari" por ser un elemento flotante, y lo puedes comprobar quitando texto del tercer párrafo, entonces el footer se encuentra justo donde termina el margin de la imagen:
Código :
.alineari {
display:block;
float:left;
margin:3px 10px 20px 20px;
}
Agrega más texto al tercer párrafo y lo comprobarás. ¿La solución?, para que el contenedor "main" cubra por completo al la imagen puedes auxiliarte de un contenedor special sólamente con una propiedad:
Código :
div.clear
{
clear: both;
}
Debe ir al final de todo el contenido de tu contenedor principal.
Si más no recuerdo el alto del div.clear será afectado por el tamaño de la fuente por default en IE, a lo mejor deberás modificarlo, también el tamaño de la línea.
Saludos.