questo menu con i.e funziona con firefox no :-( helpppp

[freetech]

Salve ho fatto un menu di immagini che cambiano alpassaggio del mouse, questo impostando i background-image, il brutto è che ora con internet explorer va benissimo mentre con firefoz mi dà dei trattini, come posso risolvere? Thanks per l'eventuale aiuto, posto di seguito il codice css e quello della pagina web:

CSS:

#uno {
width:auto;
float:left;
}

#uno ul{
list-style:none;
margin-left:0px;
padding:0px;
border:none;
float:block;
}

#uno ul li{
width:100px;
heigh:66px;
border:none;
display:inline;
float:left;
margin-right: 11px;
}

a#1{
text-decoration: none;
background-image: url(2mt.png);
display:block;
width: 100px;
height: 66px;
}

a#1:hover{
text-decoration: none;
background-image: url(prezz1.png);
display:block;
width: 100px;
height: 66px;
}


a#1:link{
text-decoration: none;
background-image: url(2mt.png);
display:block;
width: 100px;
height: 66px;
}


a#2{
text-decoration: none;
background-image: url(10mt.png);
display:block;
width: 100px;
height: 66px;
}

a#2:hover{
text-decoration: none;
background-image: url(prezz2.png);
display:block;
width: 100px;
height: 66px;
}


a#2:link{
text-decoration: none;
background-image: url(10mt.png);
display:block;
width: 100px;
height: 66px;
}

a#3{
text-decoration: none;
background-image: url(20mt.png);
display:block;
width: 100px;
height: 66px;
}

a#3:hover{
text-decoration: none;
background-image: url(prezz3.png);
display:block;
width: 100px;
height: 66px;
}


a#3:link{
text-decoration: none;
background-image: url(20mt.png);
display:block;
width: 100px;
height: 66px;
}

a#4{
text-decoration: none;
background-image: url(50mt.png);
display:block;
width: 100px;
height: 66px;
}

a#4:hover{
text-decoration: none;
background-image: url(prezz4.png);
display:block;
width: 100px;
height: 66px;
}


a#4:link{
text-decoration: none;
background-image: url(50mt.png);
display:block;
width: 100px;
height: 66px;
}

a#5{
text-decoration: none;
background-image: url(100mt.png);
display:block;
width: 100px;
height: 66px;
}

a#5:hover{
text-decoration: none;
background-image: url(prezz5.png);
display:block;
width: 100px;
height: 66px;
}


a#5:link{
text-decoration: none;
background-image: url(100mt.png);
display:block;
width: 100px;
height: 66px;
}

Parte del menu nella pagina:

<ul>[*][*][*][*][*][/list]

[freetech]

nessuno può aiutarmi? :-P

[freetech]

In pratica il risultato lo vedete qui:

http://smazen.netsons.org/prova/prova.html

Solo che con ie7 si vede con firefox no :-(

[Mich_]

Ho dato solo un'occhiata al codice, ed ho notato che sbagli l'ordine delle pseudoclassi.

L'ordine corretto e`:
:link (o niente pseudoclasse)
:visited
:hover
:active

[freetech]

Niente ora ho corretto il codice con:

#uno {
width:auto;
float:left;
}

#uno ul{
list-style:none;
margin-left:0px;
padding:0px;
border:none;
float:block;
}

#uno ul li{
width:101px;
heigh:66px;
border:none;
display:inline;
float:left;
margin-right: 11px;
}

a#1:link{
text-decoration: none;
background-image: url(2mt.png);
display:block;
width: 100px;
height: 66px;
}


a#1:visited{
text-decoration: none;
background-image: url(2mt.png);
display:block;
width: 100px;
height: 66px;
}

a#1:hover{
text-decoration: none;
background-image: url(prezz1.png);
display:block;
width: 100px;
height: 66px;
}




a#2:link{
text-decoration: none;
background-image: url(10mt.png);
display:block;
width: 100px;
height: 66px;
}

a#2:visited{
text-decoration: none;
background-image: url(10mt.png);
display:block;
width: 100px;
height: 66px;
}

a#2:hover{
text-decoration: none;
background-image: url(prezz2.png);
display:block;
width: 100px;
height: 66px;
}




a#3:link{
text-decoration: none;
background-image: url(20mt.png);
display:block;
width: 100px;
height: 66px;
}

a#3:visited{
text-decoration: none;
background-image: url(20mt.png);
display:block;
width: 100px;
height: 66px;
}

a#3:hover{
text-decoration: none;
background-image: url(prezz3.png);
display:block;
width: 100px;
height: 66px;
}




a#4:link{
text-decoration: none;
background-image: url(50mt.png);
display:block;
width: 100px;
height: 66px;
}

a#4:visited{
text-decoration: none;
background-image: url(50mt.png);
display:block;
width: 100px;
height: 66px;
}


a#4:hover{
text-decoration: none;
background-image: url(prezz4.png);
display:block;
width: 100px;
height: 66px;
}




a#5:link{
text-decoration: none;
background-image: url(100mt.png);
display:block;
width: 100px;
height: 66px;
}

a#5:visited{
text-decoration: none;
background-image: url(100mt.png);
display:block;
width: 100px;
height: 66px;
}

a#5:hover{
text-decoration: none;
background-image: url(prezz5.png);
display:block;
width: 100px;
height: 66px;
}

Ma niente ilrisultato non è cambiato, con firefox vedo solo dei trattini :-(

[Mich_]

cosa intendi per "trattini"?
Puoi postare uno screenshot o puoi postare il link?

Comunque ci sono ancora errori di sintassi: i nomi non possono iniziare con un numero, compreso i nomi degli id: devono iniziare con una lettera (o underscore, ma con questo iniziano anche i nomi interni, per cui non conviene usarlo).

[freetech]

Il link è questo:

http://smazen.netsons.org/prova/prova.html

Qui puoi vedere la differenza se lo apri con ie7 o con firefox

il codice l'ho cambiato, alposto di 1,2,3,4 ho messo primo secondo terzo etc....

ora è così:

#uno {
width:auto;
float:left;
}

#uno ul{
list-style:none;
margin-left:0px;
padding:0px;
border:none;
float:block;
}

#uno ul li{
width:101px;
heigh:66px;
border:none;
display:inline;
float:left;
margin-right: 11px;
}

a#primo:link{
text-decoration: none;
background-image: url(2mt.png);
display:block;
width: 100px;
height: 66px;
}


a#primo:visited{
text-decoration: none;
background-image: url(2mt.png);
display:block;
width: 100px;
height: 66px;
}

a#primo:hover{
text-decoration: none;
background-image: url(prezz1.png);
display:block;
width: 100px;
height: 66px;
}




a#secondo:link{
text-decoration: none;
background-image: url(10mt.png);
display:block;
width: 100px;
height: 66px;
}

a#secondo:visited{
text-decoration: none;
background-image: url(10mt.png);
display:block;
width: 100px;
height: 66px;
}

a#secondo:hover{
text-decoration: none;
background-image: url(prezz2.png);
display:block;
width: 100px;
height: 66px;
}




a#terzo:link{
text-decoration: none;
background-image: url(20mt.png);
display:block;
width: 100px;
height: 66px;
}

a#terzo:visited{
text-decoration: none;
background-image: url(20mt.png);
display:block;
width: 100px;
height: 66px;
}

a#terzo:hover{
text-decoration: none;
background-image: url(prezz3.png);
display:block;
width: 100px;
height: 66px;
}




a#quarto:link{
text-decoration: none;
background-image: url(50mt.png);
display:block;
width: 100px;
height: 66px;
}

a#quarto:visited{
text-decoration: none;
background-image: url(50mt.png);
display:block;
width: 100px;
height: 66px;
}


a#quarto:hover{
text-decoration: none;
background-image: url(prezz4.png);
display:block;
width: 100px;
height: 66px;
}




a#quinto:link{
text-decoration: none;
background-image: url(100mt.png);
display:block;
width: 100px;
height: 66px;
}

a#quinto:visited{
text-decoration: none;
background-image: url(100mt.png);
display:block;
width: 100px;
height: 66px;
}

a#quinto:hover{
text-decoration: none;
background-image: url(prezz5.png);
display:block;
width: 100px;
height: 66px;
}

[freetech]

Ah no, gulp gasp, ora funziona!!!!

Quindi l'errore era nei nomi??

Grazieeee :-)

[Mich_]

C'erano DUE errori di sintassi, di quelli che IE non rileva ma che non piacciono ad altri browser:
l'ordine delle pseudoclassi e i nomi degli id.
In questi casi i validatori di solito sono un buon aiuto (non trovano ttuto, ma una buona parte).

Inoltre facendo le cose per been, si evitano anche eventuali erorri di interpretazione in nuove versioni dei browser.

[freetech]

Grazie mille, ma cosa sono i validatori? Software che controllano il codice?
Me ne consigli uno....se funziona anche con ubuntu meglio ....se no è lo stesso :-)