IE6 e PNG: problemi di trasparenza e posizione

[blekm]

qua il link incriminato...

http://blekm.altervista.org/fastservice.html

è tutto ok in tutti i browser


tranne che per IE6, dove ho due problemi


1) le immagini PNG che uso nel menu non si vedono trasparenti, mentre però il logo in alto a sinistra (anche questo PNG) me lo fa vedere correttamente. Perchè il logo si ma le immagini del menu in background no? :master:

2) inoltre mi "nasconde" le prime due posizioni del menu

ho impostato l'hack per IE6,

1) nella directory c'è sia blank.gif che pngbehavior.htc
2) nel codice trovate questo (lo vedete anche dal link)

<style type="text/css">
img {
   behavior: url("pngbehavior.htc");
}
</style>

quindi non so dove sbattere la testa per risolvere questo problema su IE6

datemi una mano, please

per una volta che riesco a fare un sito con un solo foglio di stile senza usare commenti condizionali IE6 deve farmi incacchiare

[fcaldera]

la regola che hai usato, behaviour, è stata applicata a tutte le immagini <img>
nel tuo caso il menu è composto da png di sfondo, per cui quel file htc non ha effetto sul menu.
puoi risolvere con il filtro alphaimageloader (cerca nel forum)

Per il fatto che il menu scompaia può essere dovuto al fatto che hai impostato un margin-top negativo.

toglilo e prova impostando
position: relative, z-index: 10, top: -130px;

a #menu1

[blekm]

Originariamente inviato da fcaldera
la regola che hai usato, behaviour, è stata applicata a tutte le immagini <img>
nel tuo caso il menu è composto da png di sfondo, per cui quel file htc non ha effetto sul menu.
puoi risolvere con il filtro alphaimageloader (cerca nel forum)

Per il fatto che il menu scompaia può essere dovuto al fatto che hai impostato un margin-top negativo.

toglilo e prova impostando
position: relative, z-index: 10, top: -130px;

a #menu1

proverò appena posso, ho una domanda

le png non sono immagini? :master: perchè il behaviour non le supporta?

dovrei risolvere cosi, vero?

background: none;
filter:progid: DXImageTransform.Microsoft.AlphaImageLoader(enable='true', sizingMethod='scale', src='miosfondo.png');

su #menu1?

però ho diverse immagini per diversi class...

proverò anche la cosa per il posizionamento

grazie per ora

[fcaldera]

le png non sono immagini? perchè il behaviour non le supporta?

Forse non mi sono spiegato bene

tu hai usato una regola che viene applicata alle immagini,
cioé agli elementi <img>, questa:

<style type="text/css">
img {
behavior: url("pngbehavior.htc");
}

ok?

Nel caso dell'immagine dell'header

<div class="header">
     [img]/immagini/fastservice-blu.png[/img]
</div>

la regola viene applicata.

Però le immagini di sfondo - pur essendo immagini - NON sono contenute in un tag <img>
quindi la regola che hai usato non viene applicata alle immagini di quel menu

quindi:
1) O tieni quelle immagini in background ma usi il filtro che hai trovato
2) oppure porti le immagini di sfondo in primo piano e inserisci delle <img> nel tuo menu

[blekm]

ah, ecco..

ora ho capito, grazie

[blekm]

Originariamente inviato da fcaldera
Per il fatto che il menu scompaia può essere dovuto al fatto che hai impostato un margin-top negativo.

toglilo e prova impostando
position: relative, z-index: 10, top: -130px;

a #menu1

questo funziona correttamente, quindi una cosa è risolta

sto cercando di risolvere il problema delle png su ie6, e usando questo codice

<!--[if IE 6]>
<style type="text/css" media="all">
.png {
background: none;
width: 100%;
filter:progid: DXImageTransform.Microsoft.AlphaImageLoader(src='/immagini/home.png', sizingMethod='crop');
}
</style>
<![endif]-->

non ottengo nessun risultato.. probabilmente per il solito problema di sopra, non vi sono tag png dentro il codice html...

giusto? :master:

EDIT

nemmeno con questa soluzione riesco a risolvere..

http://homepage.ntlworld.com/bobosola/index.htm

[fcaldera]

la png va messa come sfondo del link , identificabile con la regola "li.home a"

quindi

li.home a {
display: block;
width : ...
height : ...
background : url(/immagini/home.png) top left no-repeat;
_background : url(/immagini/giftrasparente.gif);
_filter : progid: DXImageTransform.Microsoft.AlphaImageLoader(src='/immagini/home.png',
sizingMethod='noscale');
}

dove
giftrasparente.gif
è una gif di 1px x 1px trasparente

[blekm]

Originariamente inviato da fcaldera
...

ul#menu1 li.home a
{	
	display: block;
	width: 200px;
	height: 60px;
	background: url("/immagini/home.png") no-repeat left top;
	_background: url(blank.gif);
	_filter : progid: DXImageTransform.Microsoft.AlphaImageLoader(src='/immagini/home.png',
sizingMethod='noscale');
}

dove blank.gif è la stessa gif che utilizzo per l'hack sul tag IMG con pngbehaviour..

però cosi scompare completamente il background home.png, e quando faccio hover riappare home.png (è una stessa immagine con due effetti accanto, effettuo l'hover tramite posizionamento spostando l'immagine) ma sempre con lo sfondo grigio, come se non funzionasse...

impostando anche

ul#menu1 li.home a:hover
{
	background: url("/immagini/home.png") no-repeat right top;
	_background: url(blank.gif);
	_filter : progid: DXImageTransform.Microsoft.AlphaImageLoader(src='/immagini/home.png',
sizingMethod='noscale');
}

non appare niente neanche con effetto hover

[fcaldera]

aggiorna la pagina con le modifiche, altrimenti non capisco se stai modificando correttamente

[blekm]

STO AGGIORNANDO IN LOCALE, altervista ora ha dei problemi sul pannello di controllo, stanno lavorando per risolvere..


mentre se faccio cosi

<!--[if IE 6]>
<style type="text/css">
ul#menu1 li.home a { 
         background: transparent none no-repeat top left;
         filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
              sizingMethod='scale', src='/immagini/home.png');
              }
ul#menu1 li.home a:hover { 
         background: transparent none no-repeat top right;
         filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
              sizingMethod='scale', src='/immagini/home.png');
     }
</style>

ottengo l'effetto in allegato. Immagine ristretta, non cliccabile, nessun hover.

Maledetto IE6