En Firefox si, en Internet Explorer no [ayuda!]

[Federic0]

Hola gente,

Tengo un menu en CSS, donde el fondo del mismo se ve bien en firefox pero en IE no... ¿alguien sabe como puedo hacer para que funcione en ambos?

Les dejo una prueba:

http://www.quebebota.com/AlGallinero/Untitled-1.php

Codigo CSS (lo copio entero, capaz haya que cambiar otra cosa) :

Código PHP:

  /* -------------------- GENERAL -------------------- */ 
 
 
body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, form, p { margin: 0; padding: 0; } 
 
body { font: 13px Verdana, "Trebuchet MS", Tahoma, Arial, Sans-Serif; text-align: left; line-height: 15px; background: #ffffff url(images/bg.jpg) repeat-y top center; color: #999999; } 
 
h1, h2, h3, h4, h5, h6 { font-weight: normal; } 
 
a { text-decoration: none; color: #cc0000; } 
a:hover { text-decoration: underline; color: #cc0000; } 
 
a.noticias:link { font-family:  Verdana, Arial; color: #333333} 
a.noticias:visited { font-family: Verdana, Arial; color: #999999} 
a.noticias:hover { font-family: Verdana, Arial; text-decoration: uderline} 
a.noticias:active { font-family: Verdana, Arial; color: #333333} 
 
blockquote p { padding: 0 0px; } 
code { } 
 
hr { display: none; } 
 
.entry img { border: 1px solid #663300; padding: 0px; margin: 2px; } 
.entry img:hover { border: 1px solid #532900; } 
 
img.centered { display: block; margin-left: auto; margin-right: auto; } 
img.alignright { margin: 0px 0 0px 0px; padding: 0px; display: inline; } 
img.alignleft { margin: 0px 0px 0px 0; padding: 0px; display: inline; } 
img.wp-smiley { border: 0; margin: 0; padding: 0; background-color: transparent; } 
 
a img {    border: 0; } 
 
.alignright { float: right; } 
.alignleft { float: left; } 
 
input, textarea { font-family: Arial, Helvetica, Georgia, Sans-Serif; font-size: 12px; padding: 2px; } 
input#s, input#author, input#email, input#url, textarea#comment { padding: 3px; } 
 
input#author, input#email, input#url { margin: 0 0px 0 0; } 
 
pre { width: 90%; } 
 
small { font-size: 12px; } 
 
 
 
 
 
 
/* -------------------- HEADER / TOP MENU LAYOUT -------------------- */ 
 
 
#header .topmenu { float: left; width: 789px; margin: 0; padding: 0; background: #ffffff; color: #000000; display: inline; clear: both; } 
 
#header .topmenu #topmenuleft { float: left; width: 580px; padding: 0; } 
#header .topmenu #topmenuright { float: left; width: 189px; padding-left: 0; padding-top: 8px; list-style: none; display: inline; } 
 
 
/* -------------------- HEADER / NAV -------------------- */ 
 
 
#nav { background: #000000; font-size:10px; padding: 0; margin: 0; } 
#nav, #nav ul {    list-style: none; line-height: 2; } 
#nav li { float: left; list-style: none; border: 0px solid #000000; } 
#nav a, #nav a:visited { display: block; color: #FFF; padding: 5px 17px; } 
#nav a:hover, #nav a:active, .current_page_item    a, #home .on { display: block; background: #000000 url(bg-menu-on-1.png); border: 0px solid #ffffff; text-decoration: none; }     
     
     
/* -------------------- HEADER / NAV - DROP DOWN -------------------- */ 
 
 
#nav li ul { position: absolute; left: -999em; height: auto; width: 170px; } 
#nav li li { width: 150px; background: #000000; } 
#nav li li a, #nav li li a:visited { font-weight: normal; color:#FFF; border: 1px solid #000000; } 
#nav li li a:hover, #nav li li a:active { border: 1px solid #000000; }     
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; margin-left: 0; padding-left: 0; } 
 
.clearfloat { display: inline-block; } 
.clearfloat { display: block;    }  
   

[Mikmoro]

Deberías revisar el sitio de donde copiaste el código de ese menú, porque seguro que te dejaste de coger algún javascript para que funcione en IE6 (como el IE7.js, por ejemplo), si no, tal y como está no puede funcionar en IE6.
Fíjate si ponía que era compatible o no con ese navegador.

[Federic0]

Gracias por la rta!

Lo saqué de un theme de Wordpress. Por las dudas subí el javascript y lo llamé desde el header, pero tampoco funciona.

Lo raro es que el menú funciona bien, solamente que no se ve el fondo.

Prueben abriendo la web en los dos navegadores y van a entender a que me refiero...

Espero alguien me de una mano!

[Mikmoro]

Ah, lo siento, creía que hablábamos de IE6, porque en ese navegador no funciona. Luego cuando pueda lo miro en IE7.

[Federic0]

Dale, muchísimas gracias.

[Federic0]

Ya solucioné el problema de IE7.

Ahora, ¿no tenés idea como arreglar lo del IE6 no?

[Mikmoro]

Sí, claro. Podrías hacerlo como en estos ejemplos
o con este script en javascript

[Federic0]

Le agregué esté código:

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

Y en el sitio lo puse así:
<script type="text/javascript" src="http://quebebota.com/AlGallinero/js/dropdowns.js"></script>

Probás con IE6 ahora a ver si funciona?

Un abrazo grande!

[Federic0]

¿Alguien se fija si el menu funciona en IE6?

[Mikmoro]

Creo que hay algo que has entendido bien: si tú llamas a ese script en la cabecera de tu archivo HTML, él se encarga de que IE6 adquiera algunos comportamientos similares al resto de los navegadores, de los que carece por defecto, como por ejemplo :hover sobre otro elemento que no sea un enlace. De manera que si cargas el script no deberás hacer nada más para que IE6 funcione bien con tu menú, pero el comentario condicional con la carga del script :

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

lo debes poner en el header del HTML.

[Federic0]

Muchísimas gracias por la explicación.

Lo probé en http://www.quebebota.com/AlGallinero/prueba-pij.php

¿Tenés IE6? ¿Me podrías decir si te funciona?

Saludos!

[Mikmoro]

Exacto, ahora sí, funciona perfectamente

[Federic0]

Buenísimo, mil gracias por todo.

Este foro es lo maaaas.