[Résolu - merci] Transparence, div, et width sous IE

Bonjour

J'ai besoin de la transparence sous IE. Etant donné que les PNGs ne sont pas supportés par IE <= 6, j'ai vite abandonné l'idée.
Je me suis donc tourné vers les propriétés CSS. Mais là encore, IE n'est pas sympa.

J'applique la transparence sur un DIV, qui prend toute la largeur de la page (lien à la fin du message).
Donc en CSS : opacity:..;, -moz-opacity:..;, et pour IE : filter:alpha(opacity=..);.
Problème, la propriété filter:alpha(); ne s'applique que si une largeur est spécifié à mon DIV.

Bien. Alors je lui applique une largeur de 100%. Ooh la bonne idée .
Vous connaissez la suite : à savoir que IE ne supporte pas les largeurs de 100% pour les DIVs.

D'habitude, je lui mets une largeur en auto, et je le force à prendre toute la largeur avec left et right à 0. Mais ici, j'ai besoin de lui spécifier une largeur !

Et j'avoue que je ne trouve pas de solutions.
Tout fonctionne bien avec Firefox, Opera, et Safari (excepté quelques problèmes de teintes dus à la transparence sous Safari, mais je vais régler ça).

Ma question est donc : « Comment contourner ce bug d'IE ; c'est à dire : mettre un DIV en largeur 100%, et en indiquant cette largeur en CSS ? ». Ou alors, « Comment appliquer la transparence sous IE d'une autre façon ? ».


Merci pour vos réponses


Lien de la page en question : http://hywan.firegates.com/hoa/v2/index.php (en cours de construction).

PS : Au passage, je profite de l'occasion pour lancer un petit sondage : vous préférez quelle version, la première ou la seconde ? (changer juste le dossier : v1 ou v2 dans l'URL, attention à bien indiquer index.php à la fin)
Modifié par HyWaN (29 Apr 2007 - 15:45)

Pour commencer, je préfère largement la V2 à la V1, excepté peut-être la plante verte en bas à gauche qui gagnerait à être : 1) moins grande et 2) moins « netteté macro », plus schématique/motif. Sais pas si je suis clair... mais en gros ça attire un peu trop l'attention et la détourne du vrai contenu.

Concernant ton problème de transparence, je suis perplexe. Pourquoi diable aurais-tu besoin de la transparence PNG ici ? Il devrait être particulièrement aisé d'intégrer l'image du bandeau comme une seule image, avec déjà l'effet de « bande translucide par dessus les fleurs », dans une image JPEG.

Au fait, as-tu remarqué que pour afficher ton image translucide de 1x1px, il faut en tout dans les 200 000 (deux-cent mille) répétitions de l'image ? Chez moi, ça donne un Firefox très peu réactif, et un site assez peu agréable à utiliser. Utiliser une image unie de 100x100px (pas vraiment plus lourd en PNG que du 1x1px !) diminue le nombre de répétitions -- à calculer par le navigateur -- par 10 000 (dix-mille).

Quoi qu'il en soit, le seul effet « de transparence » qui ne me semble pas reproductible avec des images non transparentes est celui au survol des items de menu. Là, ne pas se prendre la tête outre mesure : on fait un PNG transparent, avec la couleur de fond « normale » du bandeau (le rose pâle) comme couleur de fond. IE6 n'affichera pas de transparence (ce qui ne nuira pas à la bonne compréhension du système de navigation du site, et comme les utilisateurs d'IE6 ne verront pas la version avec transparence PNG ils n'auront pas l'impression d'une qualité dégradée), mais au moins on n'aura pas d'affreux fond grisâtre.

Ensuite, on peut commencer à réfléchir à la transparence PNG sous IE6, et les filter alphaimageloader machin. Mais seulement une fois que cette base solide est posée.

Merci pour la réponse au "sondage", et pour le conseil.

Par ailleurs, je suis vraiment trop bête de ne pas avoir penser au JPG pour le fond du header déjà avec la transparence.
C'est juste qu'au départ, mon header ne prenait pas toute la largeur et j'avais donc écarté cette hypothèse ... J'ai presque honte

Bref, merci, je me lance de suite.

Pour le fond grisâtre sur IE avec les PNGs, j'utilise TweakPNG pour résoudre partiellement le problème. Seulement ici, j'aimerais vraiment avec la transparence en :hover. Mais c'est pas grave pour les utilisateurs de IE, ils n'auront qu'à migrer sur Firefox ou Opera qui sont gratuits.
J'estime mettre suffisament battu pour avoir un bon rendu sur IE ; 'faut pas pousser non plus

Et dernière question donc : pourquoi n'ai-je pas la même rendu de transparence Alpha d'un PNG sous (Firefox et Opera) et Safari ? C'est assez étrange.
Le problème n'existera plus, mais tout de même, c'est gênant.

Et pas bête du tout l'histoire du 1.1px, je n'y avais pas pensé. Chez moi la navigation restait fluide, mais je prends en compte la remarque pour mes développements futures


Merci pour votre aide, bonne journée


PS : une question me vient en me relisant. Est-ce que IE 7 gère le SVG nativement ?

HyWaN a écrit :
Pour le fond grisâtre sur IE avec les PNGs, j'utilise TweakPNG pour résoudre partiellement le problème. Seulement ici, j'aimerais vraiment avec la transparence en :hover. Mais c'est pas grave pour les utilisateurs de IE, ils n'auront qu'à migrer sur Firefox ou Opera qui sont gratuits.
J'estime mettre suffisament battu pour avoir un bon rendu sur IE ; 'faut pas pousser non plus

Avec un logiciel gérant correctement les PNG, tu peux enregistrer la couleur de fond (c'est à dire la couleur secondaire de la palette du logiciel) comme couleur de fond du PNG transparent. Si la transparence n'est pas comprise par un logiciel, le fond sera de cette couleur plutôt que gris.

The GIMP gère très bien les PNG (pas besoin de TweakPNG derrière).

HyWaN a écrit :
Et dernière question donc : pourquoi n'ai-je pas la même rendu de transparence Alpha d'un PNG sous (Firefox et Opera) et Safari ? C'est assez étrange.

Il faut enregistrer le PNG sans correction gamma (là encore, voir The GIMP si Photoshop ou autre ne gère pas ça correctement). Ça devrait alors passer sans problème avec Safari 2. Par contre, Safari 1.2 est pas terrible pour la gestion des couleurs du PNG, et je ne suis pas sûr que Safari 1.3 soit exempt de bugs sur ce point.

Sinon, je crois que j'ai déjà constaté un problème même avec Safari 2, sur l'écran du Mac d'un graphiste qui avait des réglages un peu particuliers... Là, j'aurais tendance à dire : tant pis pour les mac users...

HyWaN a écrit :
PS : une question me vient en me relisant. Est-ce que IE 7 gère le SVG nativement ?

Oui.

Gaffe Jsuis Mac User hehe

Mais j'ai plus tendance à utiliser Firefox ... eh oui ...

Merci pour ces réponses

Florent V. a écrit :
Oui.

Euh... Non, pas du tout. Il faut le plugin ASV, qui était développé par Adobe et ne sera plus disponible en téléchargement à partir du 1er janvier 2008.
Modifié par Julien Royer (29 Apr 2007 - 16:06)

Aïe ... vraiment, on attendait IE 7 ?

Bon la version avec la pseudo-transparence sous IE et en ligne :] (voir le lien du premier message : la version 2)