Falla el estilo.css en Iexplorer y todo descuadrado

[kahlito]

Hola.

Estoy terminando una web donde como siempre al verla y probar día a día en Mozilla Firefox y otros que no son Iexplorer todo iba bien, sin embargo entro en Iexplorer y la veo todo descuadrada. (Años después vuelvo a lo mismo)

La web es esta:

http://miratuseguro.es

Y el estilo.css el siguiente:

Código CSS:

@charset "utf-8";
/* CSS Document */
*{margin:0;
padding:0;}
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:0.8em;
    color:#000;
    background-color:#f2f2f2;
    }
#menu{
    width:700px;
    background-image: url(imagenes/fondo-menu.jpg);
    background-repeat: no-repeat;
    height:160px;   
    text-align:center;
    display:block;
    float:left;}
.menu{
    width:700px;
    height:160px;
    margin: 0;
    padding:0;  
    list-style:none;
    background-image: url(imagenes/fondo-menu.jpg);
    background-repeat: no-repeat;
    }
.menu li {float:left;}
.menu li a {
    display:block;  
    line-height:160px;
    text-decoration:none;
    font-weight:bold;
    text-align:center;      
    font-size:0.9em;
    color: #fff;
    margin-left:0;  
    }
.menu li span{display: block;
    overflow: hidden;
    text-indent:-9999em;
    }
.menu li.automovil a {  
    background-position: 0 0;
    width:160px;
}
.menu li.automovil a:hover {
    background-image: url(imagenes/fondo-menu.jpg);
    background-position: 0 160px;   
}
body#automovil .menu li.automovil a {   
background-image: url(imagenes/fondo-menu.jpg);
    background-position: 0 160px;   
}
.menu li.hogar a{
    background-image: url(imagenes/fondo-menu.jpg);
    background-position: -160px 0;
    width:70px;
}
.menu li.hogar a:hover {
    background-image: url(imagenes/fondo-menu.jpg);
    background-position: -160px 160px;
}
body#hogar .menu li.hogar a {
    background-image: url(imagenes/fondo-menu.jpg);
    background-position: -160px 160px;
}
.menu li.vida a {
background-image: url(imagenes/fondo-menu.jpg);
    background-position: -230px 0;
    width:60px;
}
.menu li.vida a:hover {
background-image: url(imagenes/fondo-menu.jpg);
    background-position: -230px 160px;
}
body#vida .menu li.vida a {
background-image: url(imagenes/fondo-menu.jpg);
    background-position: -230px 160px;
}
.menu li.decesos a {
background-image: url(imagenes/fondo-menu.jpg);
    background-position: -290px 0;
    width:80px;
}
.menu li.decesos a:hover {
background-image: url(imagenes/fondo-menu.jpg);
    background-position: -290px 160px;
}
body#decesos .menu li.decesos a {
background-image: url(imagenes/fondo-menu.jpg);
    background-position: -290px 160px;
}
.menu li.accidentes a {
background-image: url(imagenes/fondo-menu.jpg);
    background-position: -370px 0;
    width:120px;
}
.menu li.accidentes a:hover {
background-image: url(imagenes/fondo-menu.jpg);
    background-position: -370px 160px;
}
body#accidentes .menu li.accidentes a {
background-image: url(imagenes/fondo-menu.jpg);
    background-position: -370px 160px;
}
.menu li.salud a {
background-image: url(imagenes/fondo-menu.jpg);
    background-position: -490px 0;
    width:60px;
}
.menu li.salud a:hover {
background-image: url(imagenes/fondo-menu.jpg);
    background-position: -490px 160px;
}
body#salud .menu li.salud a {
background-image: url(imagenes/fondo-menu.jpg);
    background-position: -490px 160px;
}
.menu li.negocio a {
background-image: url(imagenes/fondo-menu.jpg);
    background-position: -550px 0;
    width:150px;
}
.menu li.negocio a:hover {
background-image: url(imagenes/fondo-menu.jpg);
    background-position: -550px 160px;
}
body#negocio .menu li.negocio a {
background-image: url(imagenes/fondo-menu.jpg);
    background-position: -550px 160px;
}
.logo{float:left}
#contenedor{width:990px;
margin:0 auto;
background-color:#fff;}
.imagen-encabezado{
display:block;
border: 1px solid #301c0f;}
#contenido{
    padding:10px;}
#contenidos-dobles{clear:both;}
#contenido-izquierda{
    width:520px;
    background-image: url(imagenes/fondo-contenido-izquierda.jpg);
    background-position: center bottom;
    background-repeat: no-repeat;
    padding:15px;
    float:left;
}
#contenido-derecha{
    width:350px;
    padding:15px;
    float:left;
    text-align:center;
}
.rojo{
    color: #d33431;
    font-size:1.1em;
}
h1{margin:10px;}
h2{
margin:10px;text-decoration: underline;
}
p{margin:10px;}
.imagen-centrada{text-align:center;}
.imagen-respuesta{margin:20px;}
.enlace-descarga{color: #333;font-weight: bold;
font-size:0.9em;}
.enlace-descarga:hover{ color: #d33431;}
form {
    padding:15px;
}
legend{margin:5px;padding:5px;}
fieldset {margin:5px;padding:10px;}
input{background-color: #ccc;margin:5px;}
input:hover {
background-color: #ddd; }
.aviso-formulario{color: #d33431;
}
#pie{
    background-color: #333;
    color: #fff;
    height:100px;
    clear:both;
}
.pie{
    color:#fff;
    font-size:1.2em;
    text-align:center;  
    font-weight: bold;
    position:relative;
    top: 40px;
}
.enlace-email{text-decoration:none;
color:#fff;}
.enlace-email:hover {text-decoration:underline;}
.listas{margin:10px;padding:10px;}
 

He probado varios opciones, hasta con un ie.css para ver si se arregla dejando algo para Iexplorer... pero nada no lo consigo.

¿Que error debo de cambiar?

[pitufoweb]

No he tenido tiempo de revisar el código, pero a simple vista parece que la causa del problema es el borde que tiene la imagen del logo.

Prueba agregando esta regla a tu CSS; img {border:0;}



Saludos.

[amdisenoweb]

Has puesto dos reglas una para #menu y otra .menu ¿no deberia de ser solo una? a simple vista sin ver nada de html esta un poco complicado averiguar que pasa, puede ser que la suma de los width sean muy grandres

[kahlito]

Iniciado por pitufoweb

No he tenido tiempo de revisar el código, pero a simple vista parece que la causa del problema es el borde que tiene la imagen del logo.

Prueba agregando esta regla a tu CSS; img {border:0;}



Saludos.

Hola pitufoweb, era eso, lo he arreglado aquí:

Código CSS:

.logo{float:left;
border:0;}
 

Iniciado por amdisenoweb

Has puesto dos reglas una para #menu y otra .menu ¿no deberia de ser solo una? a simple vista sin ver nada de html esta un poco complicado averiguar que pasa, puede ser que la suma de los width sean muy grandres

Hola amdisenoweb, si tengo dos reglas y haciendo cambios se quedaba igual... finalmente era el tema del borde de la imagen que hacía como bien dices que el ancho fuese más grande.

Después de tantos años... las prisas y el estar un tiempo sin hacer nada... vuelvo a fallos de principiante.

Gracias a los dos, saludos.