Differenze enormi tra IE e FF

[mortal_kombat]

Salve,
il mio problema è questo:

ho creato con molta fatica alcuni siti (ancora off-line per colpa di Bill Gates...) in cui sono presenti delle piccole immagini (tipo i tastini up e torna all'inizio per intenderci) e delle barre separatrici orizzontali solide che presentano uno sfondo trasparente e sono create in formato .png e .gif.
Praticamente, il problema è che su FF la visualizzazione è perfettamente quella che mi aspetto, con gli effetti 3d e la trasparenza, mentre su IE6 e precedenti ottengo uno sfondo grigio-celeste e perdo tutti gli effetti 3d.
Su IE7 invece perdo solo la tridimensionalità ma non gli sfondi trasparenti.

Poi, in particolare, su uno dei tre siti che ho costruito non si visualizzano le .png (eppure l'ho costruito con le stesse modalità degli altri tre...), mentre in un altro si visualizza tutto benissimo sotto l'aspetto delle immagini (.png, .gif e .jpg) ma se introduco delle tabelle per formattare il testo (cosa che ho ampiamente usato negli altri due siti) perdo il layout della pagina (in pratica, ho in alto una barra con delle schede clickabili che si spostano tutte...).

Consigli?

[Mr.TFM]

Se clicchi sul mio blog in basso a destra nella finestra c'è un PNG con su scritto TOO COOL FOR iE...

Il mio sito è troppo fiko per quella ciofeca di explorer, e (è una scelta molto personale) me ne fotto se con IE si vede male.

Su un sito personale, penso che sia lecito NON PORSI questi problemi.
Usa i PNG alla nausea, il web è innovazione, e se ci fermiamo alle gif vuol dire che anche la nostra fantasia è FERMA.

Le gif pongono dei limiti al grafico.
Io sarei per l'abolizione, pensa te!

[mortal_kombat]

Ho visto il tuo blog ed ho notato che io ho lo stesso identico problema su un sito!!! Quella "corona" attorno al corpo dello sfondo proprio non mi va giù!

Ma che cavolo... il mio non è un sito personale, anzi tutt'altro (è un sito di un gruppo di ricerca universitario...), fosse per me non me ne importerebbe nulla di IE...

Ma è possibile che non c'è modo di risolvere questa cosa? Voglio dire: non si possono rendere "tridimensionali" anche le .gif?

[eDog]

Se clicchi sul mio blog in basso a destra nella finestra c'è un PNG con su scritto TOO COOL FOR iE...

Il mio sito è troppo fiko per quella ciofeca di explorer, e (è una scelta molto personale) me ne fotto se con IE si vede male.

Su un sito personale, penso che sia lecito NON PORSI questi problemi.
Usa i PNG alla nausea, il web è innovazione, e se ci fermiamo alle gif vuol dire che anche la nostra fantasia è FERMA.

Le gif pongono dei limiti al grafico.
Io sarei per l'abolizione, pensa te!

Concordo, non uso gif da un secolo

[mortal_kombat]

Concordo, non uso gif da un secolo

Ragazzi, io concordo con voi ma... purtroppo, se analizziamo la realtà, quanta gente c'è ancora che usa IE e gli altri browsers nemmeno li prendono in considerazione?

Le .png sono davvero il massimo attualmente che si possa avere: leggere e sotto l'aspetto grafico sono le migliori, ma purtroppo IE non le visualizza correttamente!

Ma voi non usate nemmeno le .gif animate? (Che forse sono l'unica cosa salvabile di questo formato...)

[Rumez]

mi ricordo di aver avuto il tuo stesso problema in passato con la trasparenza delle ommagini png su browser precedenti a ie7..

avevo risolto brillantemente con il workaround descritto in questo articolo
http://webdesign.html.it/articoli/leggi ... -explorer/

te ne consiglio la lettura perché è veramente ben fatto..ovviamente la soluzione che prediligo è quella dei CSS a pagina 3

[Boo]

Ragazzi, io concordo con voi ma... purtroppo, se analizziamo la realtà, quanta gente c'è ancora che usa IE

Troppi.

e gli altri browsers nemmeno li prendono in considerazione?

Più che altro non li conoscono.

Le .png ... purtroppo IE non le visualizza correttamente!

Certo che le visualizza correttamente, l'unico problema di IE (prima della v7.0) era con la trasparenza (o canale alpha). Per risolvere quel problema basta usare questo javascript

Codice: Seleziona tutto

function correctPNG()
   {
   for(var i=0; i<document.images.length; i++)
      {
     var img = document.images[i]
     var imgName = img.src.toUpperCase()
     if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
        {
       var imgID = (img.id) ? "id='" + img.id + "' " : ""
       var imgClass = (img.className) ? "class='" + img.className + "' " : ""
       var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
       var imgStyle = "display:inline-block;" + img.style.cssText
       var leftOrRight = imgName.substring(imgName.length-6, imgName.length-4)
       if (leftOrRight == "_L") imgStyle = "float:left; margin-right:7px; margin-top:5px;" + imgStyle
       if (leftOrRight == "_R") imgStyle = "float:right; margin-left:7px; margin-top:5px;" + imgStyle
       if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle      
       var strNewHTML = "<span " + imgID + imgClass + imgTitle
       + " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
        + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
       + "(src=\'" + img.src + "\', sizingMethod='scale');"></span>"
       img.outerHTML = strNewHTML
       i = i-1
        }
      }
   }
window.attachEvent("onload", correctPNG);

E caricarlo in questo modo (nel tag head)

Codice: Seleziona tutto

<!--[if gte IE 5.5000]>
<script type="text/javascript" src="pngfix.js"></script>
<![endif]-->

Ma voi non usate nemmeno le .gif animate? (Che forse sono l'unica cosa salvabile di questo formato...)

L'unico vantaggio che trovo nel gif rispetto al png sono le dimensioni, per il resto le gif animate non mi piacciono.

[Rumez]

il metodo di Boo non lo conoscevo..ma conosco le competenze di Boo... sicuramente sarà la soluzione più valida anche perché mi pare che faccia in automatico la stessa cosa consigliata nell'articolo..l'unico problema potrebbe essere con gli utenti che disabilitano javascript nel loro browser

[mortal_kombat]

Oh, ma grazie!
Stasera farò tutte le prove del caso ed immagino andrà bene!

Per fortuna esiste MegaLab

Grazie a Rumez e Boo

[mortal_kombat]

ovviamente la soluzione che prediligo è quella dei CSS a pagina 3

Anche io!
L'ho provata tempo zero con una immagine che avevo qui nel pc e funziona!
Mitico Rumez, grazie mille davvero!!!