Fond: background color + png

Mon souci est que pour mon site de stage, le fond est composé d'un background de couleur verte et par dessus d'un png avec transparence.
Cela fonctionne bien sous FF mais sur IE6 le background vert ne s'affiche pas, seul le png.
http://www.innastudio.com/realisation

Voici ma feuille de style CSS:

html, body {
	height:100%;
	margin:0;
	font-size:13px;
	text-align:justify;
	background-color:#80B3B5;
	background: #80B3B5 url(/imgs/fond_site2.png) no-repeat top;
	}

Est-ce que quelqu'un a connu le même problème?
Modifié par hachi (21 Mar 2008 - 17:18)

Bonjour

La solution ?

Cordialement, SD.

J'ai lu les différents topics sur le forum sur les problèmes de transparence avec les png. Mais dans mon cas la transparence sur le png fonctionne très bien

T'as aussi et surtout un problème avec tes liens dans ton menu du haut, ils sont inaccessibles sous IE6 et comme ton png n'est pas transparent, on ne voit pas le texte dans les cadres du bas (a gauche en fait^^)

Ben non ça fonctionne pas, le problème vient d'IE6 qui gère pas la transparence, il faut donc gruger un peu (il y a pléthore de sites avec plein d'infos pour y remédier...
Modifié par inzemix (21 Mar 2008 - 17:30)

La transparence fonctionne mais tu ne vois pas ce qu'il y a derrière?

Que voila une transparence opaque

Pm-moi si vraiment tu n'arrives pas à trouver la solution, mais là... je n'ai pas IE6 avec moi, donc je ne peux pas t'aider.

Problème résolu en partie mais c'est déjà ça.
Pour le fond, il a juste suffit de mettre: background-image: none pour la feuille de style spéciale IE6. Parce qu'on lui avait mis une image gif vide mais il devait mal interpréter.
Il reste toujours le problème du menu qui ne veut pas fonctionner. Je crois qu'on va lacher l'affaire et rependre ça après le weekend!

Merci pour votre aide

Ah, je vois.

Quand tu utilises un filter avec MS IE, il faut aussi penser à supprimer le background

Donc avant tout appel de filter:........, ajoute "background: none;" dans ta feuille IE6

SiDi a écrit :
Quand tu utilises un filter avec MS IE, il faut aussi penser à supprimer le background

Comme le précise la FAQ, d'ailleurs.

Je te recommande vivement de lire la FAQ et de suivre les liens que je t'ai proposé.

Ton problème de menu est directement lié à l'utilisation du filter, qui désactive les liens dans la zone où il est utilisé. Ça se corrige en une ligne, mais je l'ai oubliée...

Au fait, ton animation Flash ne se rafraichit pas lors d'un scroll ou resize de la page, ce qui a tendeance à donner quelque chose de pas très très beau .

SiDi a écrit :
Au fait, ton animation Flash ne se rafraichit pas lors d'un scroll ou resize de la page, ce qui a tendeance à donner quelque chose de pas très très beau .

Et sous Linux elle passe au premier plan (un défaut du plugin Flash sous Linux semble-t-il), ce qui rend le site inutilisable.

Bonjour,

Pour le menu, nous avons tenté différents options pour que le filtre ne passe pas par dessus les liens et reste bien en arrière.
On a testé le layout( height:1%, width:100%,..) mais aussi le z-index et le zoom. On ne trouve toujours pas la solution. Est-ce que quelqu'un a une idée?

Actuellement, notre code pour la feuille de style ie6 est le suivant:

html,body {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src=/imgs/fond_site2.png);
	background-image:url(imgs/vide.gif);
}

#accueil{
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src=/imgs/fond_accueil.png);
	background-image:url(imgs/vide.gif);
}

Si on enlève ce bout de code, le menu fonctionne normalement. Où est le bug?
Le menu:

#menu{
	margin:0;
	padding:0;
	position:absolute;
	top:27px;
	left:70px;
}
ul#menu li{
	margin:0px 20px 0px 0px;
	list-style:none;
	float:left;
}

Modifié par hachi (25 Mar 2008 - 12:35)

Hello,

Déjà, une bêtise:

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

Les correctifs pour le transparence PNG ne sont nécessaires que pour IE6 (et 5.5 si on s'occupe du support de cette version). IE7 n'en a pas besoin, et de plus utiliser ces correctifs pour IE7 est une erreur grossière car:
1. l'implémentation de PNG-24 dans IE7 est correcte;
2. la solution apportée par les correctifs est très imparfaite et moyennement fiable...

Bref, mieux vaudrait appeler ce script depuis un commentaire conditionnel pour IE6 (ou IE6 et inférieurs si on s'occupe du support de la version 5.5).

Ensuite: la réponse se trouve quelque part sur le forum, mais en gros pour que les liens redeviennent actifs au survol (dans IE6), il faut les positionner en relatif, ou positionner en relatif un élément placé entre les liens et le conteneur qui utilise le filtre AlphaImageLoader.

On a mis les liens en relatifs et crée un div en relatif qui contient le menu. On a testé de différentes façons (liens en relatifs et pas le div,...) mais rien ne fonctionne

Mouais...

Pour commencer, j'essaierais sans le script pngfix.js dont l'utilité ne me saute pas aux yeux, vu que la feuille de styles ie6.css comporte déjà des correctifs utilisant le filtre AlphaImageLoader. C'est voulu d'utiliser deux fois la même solution, une fois manuellement et une fois via un script? Je pense que ça peut surtout être source de problèmes.

Ensuite, comme je le disais, le type de commentaire conditionnel choisi pour appeler ce script est une erreur. Il faudrait au moins la corriger (après avoir testé sans ce script).

Je suggèrerais bien de tester s'il n'y a pas de problème autre (par exemple un problème de superposition d'un élément «invisible» par dessus le menu dans IE6) qui interviendrait, mais je suppose que vous avez déjà testé sans script JS et sans correctifs CSS pour vérifier que le problème ne venait pas de là?

Juste une question comme ça en passant, est-ce normal de vouloir afficher le même fond (background et image) à la fois dans la balise html et dans la balise body ?

desolé,mais IE6 n'accepte pas les images transparentes.

banouar09 a écrit :
desolé,mais IE6 n'accepte pas les images transparentes.

Bonjour banouar09,

Merci de lire le sujet avant de répondre, et fais attention à bien te renseigner avant d'affirmer une bêtise.

Pour être clair: Internet Explorer 6 n'a pas de support natif de la transparence pour les images PNG-24 avec couche alpha (ce qu'on appelle aussi parfois des images en PNG-32). Il est cependant possible d'utiliser un filtre DirectX via la propriété non-standard filter pour afficher une image en PNG-32 avec un gestion correcte de la transparence. La FAQ du forum en parle et indique 1) la méthode et 2) une partie des limites.