Problema html solo con IE...aiuto

[zebrone94]

sono ore che cerco di risolvere questo problema ma proprio nn ci riesco...
(premetto che sto cercando di imparare html e css ma ancora nn ne capisco molto)
vi spiego il mio problema:
sto creando un sito in html e in questa pagina
http://www.arweb.altervista.org/meteocatone/index.html
ho creato un menu a tendina in CSS, ecco qui il mio problema: con Firefox , Safari, Chrome, tutto funziona alla perfezione mentre con Internet Explorer (8 ma credo anche i precedenti) non funziona il menu a tendina. Vi ringrazio per le vostre risposte e la vostra pazienza....

[graffithouse]

se ti può consolare non funziona bene nemmeno a me che uso opera.

e poi, quando il menu esce, mi si va ad incastrarre sotto il banner in flash.

perchè non provi a postare il codice del menu, o ci rimandi a dove l'hai preso?

[zebrone94]

allora... il codice del menu è questo, però ho notato che se inserisco solo il menu senza banner o altri contenuti, il menu viene visualizzato corettamente , quindi secondo me c'è qualche errore nel html della pagina... vi prego aiutatemi perchè fa cosi con ogni menu che inserisco

<style>
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#fff;
background-repeat:repeat;
border-color:#808080;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
height:21px;
float: left;
}
ul.pureCssMenu ul{
width:197.4px;
}
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#FFFFFF;
border-width:1px;
border-color:#fff;
border-style:solid;
text-align:center;
text-decoration:none;
padding:2px 5px 5px 10px;
_padding-left:0;
font:normal 11px Tahoma;
color: #000;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:3px;
height:100%;
display:inline-block;
background-color:#808080; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:100%;
height:3px;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#DBF0F9;
border-color:#45ADE4;
border-style:solid;
font:normal 11px Tahoma;
color: #444;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#DBF0F9;
border-color:#45ADE4;
border-style:solid;
font:normal 11px Tahoma;
color: #444;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #557D4F !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul{display:block}
ul.pureCssMenu a:hover ul ul{display:none}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arrv_white.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:9px;}
ul.pureCssMenu ul span{background-image:url(./images/arr_black.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_white.gif);}
ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span{background-image:url(./images/arr_white.gif)}
ul.pureCssMenu table a:hover table span{background-image:url(./images/arr_black.gif)}
ul.pureCssMenu li.pureCssMenui0 {
width:110px;
height:23px;
}
ul.pureCssMenu li a.pureCssMenui0{
height:100%;
background-image:url(./images/btn3.jpg);
border-width:0px;
font:normal 11px Tahoma;
color:#fff;
}
ul.pureCssMenu li a.pureCssMenui0:hover{
background-image:url(./images/btn4.jpg);
font:normal 11px Tahoma;
color:#eee;
}
ul.pureCssMenum0 {
background-color:transparent;
border-width:0px;
padding:0px 0px 0px 0px;
}
ul.pureCssMenum0>li>a {
padding:8px 10px 0px 10px;
}
ul.pureCssMenum0 a {
padding:8px 10px 0px 10px;
}
ul.pureCssMenum0 ul a {
padding:2px 5px 5px 10px;
}
ul.pureCssMenum0>li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li li {
margin:2px 0px 0px 2px;
}
</style>





<ul class="pureCssMenu pureCssMenum0">
<li class="pureCssMenui0">Home
<li class="pureCssMenui0"><span>Previsioni Meteo</span><![if gt IE 6]><![endif]>
<ul class="pureCssMenum">
<li class="pureCssMenui">Nazionali
<li class="pureCssMenui">Castelli Romani
[/list]

<li class="pureCssMenui0"><span>Carte</span><![if gt IE 6]><![endif]>
<ul class="pureCssMenum">
<li class="pureCssMenui">Scariche Elettriche sul Mediterraneo
<li class="pureCssMenui">Nefoanalisi Italia
<li class="pureCssMenui">Nefoanalisi Mediterraneo
<li class="pureCssMenui">Nubi e temporali
[/list]

<li class="pureCssMenui0"><span>Modelli</span><![if gt IE 6]><![endif]>
<ul class="pureCssMenum">
<li class="pureCssMenui">GFS Europe
<li class="pureCssMenui">ECMWF
<li class="pureCssMenui">UKMO
<li class="pureCssMenui">NOGAPS
<li class="pureCssMenui">GME/DWD
[/list]

<li class="pureCssMenui0">Archivio Meteo
<li class="pureCssMenui0"><span>MeteoSAT</span><![if gt IE 6]><![endif]>
<ul class="pureCssMenum">
<li class="pureCssMenui">Mondiale
<li class="pureCssMenui">Italia
[/list]

<li class="pureCssMenui0">Meteo Alert[/list]
<a id="pcm"

[wino_7]

Caro amico anzitutto in bocca al lupo per lo studio, sfortunatamente per te sei entrato a far parte (a tua insaputa) dei guerrieri anti-IE e presto o tardi ti troverai a batterti nelle lunghe notti davanti al Pc con la famiglia IE.

Prima di aggiustare quel menu ti consiglio di rivedere l'html, ho visto che hai link un foglio di stile nella prima riga, prima dei tag:

<html> 
<head> 

Non ho dato un'occhiata al codice cmq ti dico che ci sono due modi per creare menu a tendina, uno è con l'utilizzo dei css, ma sfortunatamente IE6 supporta l'evento hover solo su tag <a> e quindi non puoi far apparire un div o una lista nidificata.

L'altro modo è javascript con l'eventuale aiuto di framework js, questa soluzione te la sconsiglio, (causa accessibilita'), in ogni caso chiediti se è necessario un menu' a tendina, altrimenti rivedi lo schema di navigazione anche perchè non è complicato essendoci pochi link.

[Vincent.Zeno]

@zebrone94

per postare codice sul forum utilizza il tag CODE.
gli utenti ringraziano

[zebrone94]

Grazie 1000, ho risolto... :master: Questo errore si creava solo con menu in CSS, perchè erano presenti altri contenuti in CSS che per caso utilizzavano gli stessi file, quindi ho cambiato menu creandone uno interamente in JS. Grz lo stesso

[zebrone94]

Se volete vedere com'è venuto il sito potete andare su ....... e se ci sono errori o qualcos'altro , segnalatemelo!!! Grazie

[Vincent.Zeno]

Originariamente inviato da zebrone94
Se volete vedere com'è venuto il sito potete andare su ....... e se ci sono errori o qualcos'altro , segnalatemelo!!! Grazie

se desideri un'opinione generale o tecnica sul tuo sito c'è l'apposita sezione annunci

ciao