menu css a:hover

[lucavizzi]

Buongiorno,
uso questo foglio di stile per un menu orizzontale.

Il problema è che con ie6 non viene visualizzata, su hover, l'immagine di sfondo del pulsante.

#menuheader {
	height: 30px;
	width: 800px;
	background-image:url(Immagini/menu.gif);
	margin: 0px auto;
	text-align:center;
	font-family: Segoe UI, Arial, Helvetica, sans-serif;
	font-size:12px;
}
#menuheader ul{
    margin:0px;
	padding:0px;
	list-style-type:none;
	width:800px;
}
#menuheader li{
    float:left;
	width:124px;
	height:30px;
	margin-left:8px;
}
#menuheader a{
	text-decoration:none;
	line-height:30px;
	color:#FFFFFF;
	display:block;
	margin:0px;
	padding:0px;
}
#menuheader a:hover{
    background-image:url(Immagini/roll.png);
}

Si può far funzionare anche con ie6?
Grazie

[fcaldera]

#menuheader a:hover{
background-image:url(Immagini/roll.png);
direction: ltr;
}

attenzione, comunque, che IE6 gestisce male le immagini png

[LineaPixel]

IE6 non visualizza proprio le png....
Comunque consiglio di crearti sempre tutti e 4 gli stati del tag a, non dichiararne uno solo.

[lucavizzi]

grazie grazie grazie grazie

resta il problema della png che viene visualizzata malamente.

Il problema è che il fondo del menu non è uniforme, sfuma dal blu al verde.

Ora o faccio una gif che si vede male su ie7 e meno male su ie6 oppure
lascio una png che si vede bene su ie7 e male si ie6.

Voi che dite?
:master:

aspetto altri preziosi consigli

[lucavizzi]

un altra cosa:
l'area sensibile del pulsante è limitata al testo del link mentre io vorrei che fosse per le dimensioni dichiarate per la li.

Si può ovviare?

[fcaldera]

per la png: fai una ricerca nel forum, se n'è gia parlato più volte

per il link: dai display: block; e delle dimensioni in modo da rendere l'area cliccabile delle dimensioni dell'[*]

[lucavizzi]

grazie fcaldera, l'avevo fatto ma non mi funzionava... forse un problema di cache.
Cmq ora va

per quanto riguarda la png:

non posso usare una gif perchè lo sfondo del menù sfuma da un azzurro intenso(a sinistra) ad un azzurro verdastro (a destra).

la png è un rettandolo delle dimensioni della li (e dell' a) con un bordo bianco ed un fondo sempre bianco ma che deve essere trasparente.

Non sono riuscito a salvare nessuna gif decente, pensavo di aver risolto con la png ma ora sono punto e a capo.

ho cercato nel forum ma nulla sembra fare al caso mio....

hai qualche dritta?
Grazie
Luca

[fcaldera]

png come immagine di sfondo, dai un occhiata al codice sorgente qui: http://www.fabriziocalderan.it/bg_png/bg2.html

[lucavizzi]

ci ho provato ma non mi funziona:

foglio di stile (esterno)

#menuheader a:hover{
    background-image:url(Immagini/roll.png);
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', xsrc='Immagini/roll.png');
    direction:ltr;
}

poi nell'head della pagina

<!--[if lte IE 6]>     
<style type="text/css">
#menuheader a:hover {
    background-image:url(Immagini/roll.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', xsrc='Immagini/roll.png');
    direction:ltr;
}
</style>
<![endif]-->

[Cerebro]

per le png usa "iepngfix", cerca su google (vabbè è un automatismo di quel progid alpha bla bla, ma una cosa automatica). ci sono delle limitazioni comunque. per gli sfondi ho riscontrato che devono essere posizionati sempre in top left e meglio se le immagini sono quadrate (nel caso aggiungi spazio trasparente)

Originariamente inviato da fcaldera
#menuheader a:hover{
background-image:url(Immagini/roll.png);
direction: ltr;
}

uhm, come mai questo fix? giusto per rendere diversa la dichiarazione della classe e forzare il refresh?