El menu no se ve con IE6

[Baldur]

Hola, pues cada vez estoy más hasta los mismísimos co*** del IE.

Ahora el fallo me viene con IE6, que no me visualiza los menús como debería.
Es decir, los menús tienen una imagen JPG de fondo que se "clarea" un poco cuando se pasar el ratón por encima.
Pues bien, el IE6 directamente muestra el menú como 4 palabras seguidas, una detrás de otra....una cagada vamos....

Estas son las clases del menú:

Código:

/* navegación */
.navigation { 
 background: #D9E1E5 url(img/nav.jpg);
 border: 1px solid #ffffff;
 height: 41px;
}
.navigation a {
 background: transparent url(img/nav.jpg) left top repeat-x;
 border-right: 1px solid #D8EBD8;
 color: #1C455E;
 display: block;
 float: left;
 font: bold 1.1em sans-serif;
 line-height: 41px;
 padding: 0 18px;
 text-decoration: none;
}
.navigation a:hover {
background: transparent url(img/nav.jpg) left bottom; 
color: #1C455E;
}

Lo mismo me hace en el Sidenav:

Código:

.sidenav {
 float: right;
 width: 210px;
}
.sidenav h2 {
 color: #1C455E;
 font-size: 1em;
 line-height: 30px;
 margin: 0;
 padding-left: 12px;
}
.sidenav ul {
 padding: 0;
 border-top: 1px solid #D8EBD8;
}
.sidenav li {border-bottom: 1px solid #D8EBD8;}
.sidenav li a {
 font-size: 1.1em;
 color: #1C455E;
 display: block;
 padding: 8px 0 8px 5%;
 text-decoration: none;
 width: 95%;
}
.sidenav li a:hover {
 background-color: #EBF0F3;
 color: #2E7198; 
}

Alguna ayuda para poder solucionar esto???

Es que ya tuve que cambiar el Doctype y prescindir de usar un OnMouseOver en la galería de imágenes por culpa del IE7, que me desencajaba toda la cabecera de la página...aunque no entiendo que efecto le tiene ahí el DOCTIPE, pero con el XHTML 1.0 no funciona el OnMouseOver ni en firefox ni en IE7, pero con el Doctype HMTL 4.0 funciona en Firefox, pero IE7 me descuadra toda la cabecera....no le encuentro sentindo pero es así....xD

Bueno, espero que me podais ayudar con este problemón...

Gracias por la ayuda y un Saludo!

[Mikmoro]

¿No tienes un enlace donde poder verlo? Es que sin ver el html al que le aplicas ese css, y sin ver tu imagen y qué ocurre cuando le cambias la posición de left top a left bottom, es difícil saber.

[Baldur]

Sí, perdona, lo acabo de subir aquí: http://www.aluminiosdumbria.baldurdesing.es/

[Mikmoro]

El problema proviene de que estás usando el juego de caracteres UTF-8, pero tu html y tu css no están codificadas como UTF-8.

Haz la prueba cambiando la declaración del charset por este otro:

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />

A ver qué tal.

[Baldur]

Na, acabo de probarlo en IE6 y sigue igual....
Puedes verlos en la misma dirección. He cambiado eso en el index.html y productos/PVC.

También me fijado, que algunas imágenes PNG como el "botón" cerrar cuando se amplía una imagen, tampoco se ven en IE6...

Tienes que perdonar que no me entere del porqué de estas cosas...hace mucho que no programo una web "desde cero", es decir, las que hice hace años fueron con HTML a pelo, sin CSS, y desde hace tres años uso Joomla.
Pero esta como no necesita gestión de contenidos ni nada, pues me he puesto a hacerla "toda a mano" y con CSS, sólo los había usado el año pasado, pero muy poco, con lo cual aún ando algo perdido...

PD: si te digo la verdad, no tengo ni idea de para que sirven esas líneas...jeje, yo siempre creo el documento en dreamweaver, y luego empiezo a picar código...pero esas líneas se las dejo estar siempre...xD

[Mikmoro]

Creo que no has borrado la cahé de tu explorer, porque en IE6 ahora se ve el menú perfectamente, tal y como te decía.

[Baldur]

Anda, pues tienes razón.
Pero no se ven todas bien.
Por ejemplo, de productos sólo se ve bien PVC, el resto fallan.
Y Contacto también falla...
Contacto, además de lo que tú me digiste tiene esto también: <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
No sé para que es, pero estaba en el código de ejemplo de un formulario de contacto en php...

[Mikmoro]

Es que por ejemplo la página de Aluminio sí la tenías guardada en UTF-8. Mira el código fuente y verás tres caracteres raros arriba del todo: eso se llama BOM, y es una forma que tienen algunos programas de identificar el tipo de archivo.

Abre ese archivo, guárdalo en formato normal ANSI sin BOM (busca esta opción en el guardar cómo de tu programa), y se resolverá.

[Baldur]

Uso Dreamweaver CS3, pero en Guardar Como... no encuentro por ningún lado eso del BOM, ni tampoco veo esos caracteres raros en el código fuente visto desde IE6...

[Mikmoro]

Puedes verlos de dos maneras:
A) viendo el código fuente desde firefox, donde encontrarás en la parte superior del documento estos 3 caracteres 

B) Abre el terminal de windows (Inicio - Ejecutar - cmd.exe)
Escribes: more C:\... (la ruta y el nombre completo de tu archivo)
Verás que lo primero que sale son esos 3 caracteres.

No conozco Dreamweaver, pero en alguna parte debe tener algo como "Codificación". Si es así, busca codificación como ANSI sin BOM.

[Baldur]

Ya lo solucioné hace un rato, no sé como, pero lo hice.
Bueno lo que hice fue copiar el head de productosPVC, al resto de productos y ya fue....xDxDxD..jejeje....

Ahora sólo me queda un pequeño problema con IE6, para que se vea toda la página OK.

El problema es, que si pulsas en una imagen, por ejemplo de la galeria, esta de aumenta mediante el script que usé Lytebox.
Pero no muestra el botón Cerrar(esquina inferior derecha del cuadro donde se muestra la imagen). Esta imágen es Close_Blue.png.
Tampoco muestra las imágenes de Prev ni Next, que tendrían que aprecen a izquierda y derecha de la imagen respectivamente. Estas dos úlitmas son GIF...

Sabes que puedo hacer para solucionar esto???

Gracias por todo y un Saludo!