Javascript e css: errore con IE7

[FiNaR76]

Ciao a tutti,

ho una semplice funzione java per un "drill down menu". la funzione e' la segunete:

sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagNa me("LI");
for (var i = 0; i < sfEls.length; i++) {
sfEls[i].onmouseover = function() {
this.className += " sfhover";
}
sfEls[i].onmouseout = function() {
this.className = this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

nel .ccs ho inserito le seguenti classi:


/*menu*/
.menu { padding:0; margin:0 auto; width:942px; background:#000; }
.menu ul { text-align: left; padding:0; margin:0; list-style:none; border:0; float:left;}
.menu ul li { float:left; margin:0; padding:0 5px 0 0; border:0;}
.menu ul li a { float:left; margin:0; padding:16px 15px; color:#fff; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a:hover { background:#89C541;}
.menu ul li a.active { background:#89C541;}

/*_________second level menu__________*/

.menu li ul {
position: absolute;
z-index: 20;
background: #F79423;
margin:47px 0 0 0;
width: 150px;
padding: 0;
left: -999em;
}

.menu li ul li {
margin: 0;
padding: 0;
width: 150px;
}

.menu li ul li a {
padding: 0px 15px;
display: block;
height: 24px;
font-weight: normal;
color: #FFFFFF;
background: #000000 !important;
font-size: 10px;
line-height: 24px;
text-decoration: none;
border-top: 1px solid #FFFFFF;
width: 150px !important;
}

.menu li ul li a:hover {
background: #89C541 !important;
}

/*_______third level list_______*/

.menu li ul ul { /* third-and-above-level lists */
margin: 0 0 0 180px;
}

.menu li:hover ul ul, .menu li:hover ul ul ul, .menu li.sfhover ul ul, .menu li.sfhover ul ul ul {
left: -999em;
}

.menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li.sfhover ul, .menu li li.sfhover ul, .menu li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

in IE 8 e Crome no ho nessun problema....

in IE 7 i submenu hanno uno strano comportamento... si spostano di lato, lasciando degli spazi vuoti (il sito e' live www.italiansrestaurant.com.au ed il menu in oggetto e' Menu->Function Special)

credo che il problema sia necss... ma nn riesco a capire come mai in IE8 e Crome tutto funziona...

grazie a tutti

Vit

[ResianTaxidrive]

siccome anche con FF funziona bene, secondo me fai prima a fare uno stile apposta per IE7

[FiNaR76]

il problema e' proprio questo... non so come cambiare lo stile per funzionare con IE7...

anche con safari funziona.... ;(

[ResianTaxidrive]

devi aggiungere nell'header una cosa così:

<!--[if lte IE 7]>
<style type="text/css" media="screen">

body{
background-color:#f00;
}

</style>
<![endif]-->

naturalmente al posto dello stile che ho scritto per body, scriverai quello che ti va bene a te

[FiNaR76]

grazie per il suggerimento...

ma purtroppo non so come modificare il css per farlo funzionare con IE7...

nessun suggerimento???

grazie 1000

Vit

[ResianTaxidrive]

ma scusa, cambia il valore di left del menu di secondo livello; mettigli di più, di meno, fai le prove...

.menu li ul {
position: absolute;
z-index: 20;
background: #F79423;
margin:47px 0 0 0;
width: 150px;
padding: 0;
left: -999em;
}