PNG transparent IE6

**djoyeux** · 28/09/2007, 18h02

Bonjour j'ai fait un disign d'un site avec des PNG transparent

http://reverb.djoyeux.fr

Ceux qui ont IE6 verront que du gris s'ajout au lieu de la transparance.

Binsunur m'a donnée un lien http://support.microsoft.com/kb/294714 sur lequelle j'ai vu qqch de pas mal mais j'arrive pas à l'appliqué.

JE vous donne mon CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
.droite { text-align: right;}
.gauche { text-align: left;}
.centrer { text-align: center;}
.head, body {color: #FFF;}
.flotant_gauche { float: left; padding: 10px; }
.flotant_droite { float: right;}
img { border: 0px;}
 
*{margin:0; padding:0; border:0;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
 
body {
	margin:0 auto;
	font: normal 10pt Verdana, Arial, Helvetica, sans-serif;
	background-image: url(../images/fond.png);
}
 
/*///////////////////////////////////  GLOBAL  //////////////////////////*/
#global {
	position: absolute;
	width: 900px;
	left: 50%;
	top:15px;
	margin-left: -450px;
	background: transparent;
}
 
/*///////////////////////////////////  HEADER  //////////////////////////*/
#header {
	width:900px;
	height:180px;
	font-weight:bold;
	text-transform:uppercase;
	background: url(../images/header.png) no-repeat left top;
}
#fond {
	width:900px;
	background: url(../images/fondcontenu.png) repeat-y left top;
}
/*///////////////////////////////////  MENU  A GAUCHE //////////////////////////*/
#menu {
	float:left;
	display:inline;
	width:177px;
	text-align:left;
	margin:0 0 0 30px;
}
#menu h2 {
	width:177px;
	height:30px;
	line-height:30px;
	font-size:10pt;
	margin:0;
	padding:0 0 0 0px;
	color:#FFF;
	background: url(../images/rubrique.png) no-repeat left top;
}
#menu ul {
	margin:0 0 15px 0;
	width:162px;
	font-size:10pt;
	list-style:none;
}
 
#menu ul li {
	width:177px;
    text-align:center;
}
 
#menu ul li a {
	display:block;
	margin:0px;
	padding:0 0 0 0px;
	width:177px;
	height:29px;
	line-height:29px;
	text-decoration:none;
	font-size:8pt;
	FONT-WEIGHT: bold;
	color:#FFF;
	background: url(../images/lien.png) no-repeat left top;
}
 
#menu ul li a:hover {
	text-decoration:underline;
	background: url(../images/lienhover.png) no-repeat left top;
}
 
/*///////////////////////////////////  CORPS  //////////////////////////*/
#corps {
	width:643px;
	margin:0 0px 0 228px;
	background-color: #000066;
	background: url(../images/fondtexte.png) repeat-y left top;
}
 
.floatl {
	float:left;
	padding-right:1em;
	margin:5px;
}
.float2 {
	float:right;
	padding-left:1em;
	margin:5px;
}
 
#corps h1 {
	height:17px;
	font-size:10pt;
	margin:0;
	padding:0 0 0 0px;
	color:#FFF;
	font: bold 10pt;
	background: url(../images/fondh1.png) no-repeat center top;
}
.haut {
	height:15px;
	margin:0px;
	background: url(../images/hautcorps.png) no-repeat left top;
}
.bas {
	height:30px;
	margin:0px;
	background: url(../images/bascorps.png) no-repeat left top;
}
#corps p {
	color:#FFF;
	padding:5px;
	text-indent:15px;
	text-align: justify;
	margin:5px 5px 5px 0;
}
#corps p.classic {
	padding:0px;
	text-indent:20px;
	text-align: justify;
	margin:0px 0px 0px 0;
}
#corps p a {
	color:#FF8000;
}
 
#corps p.right {
	margin-right:15px;
	text-align:right;
	font-weight:bold;
	font-size:9px;
	letter-spacing:1px;
	color:#8d8d8d;
}
 
/*///////////////////////////////////  FOOTER  //////////////////////////*/
p#footer {
	clear:both;
	width:900px;
	height:98px;
	padding-top:10px;
	font-size:9px;
	text-align:center;
	color:#8d8d8d;
	background: url(../images/footer.png) no-repeat left top;
}
 
p#footer a{
	color:#FF8000;
	font-size:9px;
}

Je sais pas ou mettre cette fonction dans mon CSS (si possible pour rendre ces images transparentes. Par ce qu'en Gif c crade)

Merci

**Borus** · 28/09/2007, 18h08

Je n'ai pas le temps de lire le code, mais si ca peut t'aider, regarde par ici.
Une amie a testé et m'a dit "ca marche" mais pas encore eu le temps de check de moi même.

**djoyeux** · 28/09/2007, 18h09

Merci je vais regarder ça.

**djoyeux** · 28/09/2007, 18h24

ça a pas l'air de marcher mais je m'y prend surement mal.

en plus j'ai qu'une machine virtuel pour tester sur IE6.

**djoyeux** · 28/09/2007, 19h03

Bon j'ai reussi a faire marcher ça, mais je perd l'option repeat-y top left.
de mon ID #fond

Du coup j'ai plus de fond à mon site...

qqu à une solution ?

En plus il faut le mettre dans le code de la page entre <style> sinon dans la feuille de style ça passe pas.

**Bisûnûrs** · 28/09/2007, 19h54

Aide-toi de ce post :
http://developpez.net/forums/showpos...16&postcount=3
en corrigeant les éventuelles erreurs de syntaxe CSS.

**djoyeux** · 28/09/2007, 21h23

Re : j'ai du mal avec le topic que tu m'as conseillez. Du coup mon background de l'header disparait.

J'ai rajouter ça dans mon CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#header {
	width:900px;
	height:180px;
	font-weight:bold;
	text-transform:uppercase;
	background: url(../images/header.png) no-repeat left top;
}
/*--- gestion transparence des png pour IE ---*/
* html #header {
    background-color: #000;
    back\ground-color: transparent;
    background-image: url(blank.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/header.png", sizingMethod="scale");
    }

Mes j'ai plus d'image sur IE6 sur le 7 et FF pas de problème, mais bon c pas le but...

**Bisûnûrs** · 28/09/2007, 21h29

A tout hasard, à la place de ces trois lignes là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);

Mets :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background:none;

**djoyeux** · 28/09/2007, 21h34

Snifff pas mieux

Pour ma culture générale tu peux m'expliquer ce que signifie

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

* html #header

le "html" sinifie quoi ?

ne seraisset pas la même chose que le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

* #header

?

PS : Ta déjà fait ce que j'essaye de faire pour mon PNG transparent en background ?

**Bisûnûrs** · 28/09/2007, 21h51

En fait, la syntaxe * html n'est reconnue que par IE6, d'où l'intérêt de la mettre devant un élément qu'on ne veut modifier que pour ce navigateur.

Donc non, ça ne serait pas la même chose de ne mettre que * #header.

Oui, j'ai déjà utilisé cette méthode, et elle fonctionne.

Aprouvée ici :

http://josselin.willette.free.fr/codessources/pngie6/

**djoyeux** · 28/09/2007, 22h06

Début de solution :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
#header {
	width:900px;
	height:180px;
	font-weight:bold;
	text-transform:uppercase;
	background: url(../images/header.png) no-repeat left top;
}
* html #header {
	background:none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/header.png", sizingMethod="scale");
}

Ce code là fonctionne.
1er point : J'ai du retiré le repertoire parent dans le chemin de l'image. et là j'ai bien ma transparence de mon background.

2ème point : Du coup plus aucun lien <a> dans ma page fonctionne !!!! aurais-tu une idée ?
J'ai l'impression que d'appliqué ces attibut à met block, font que plus aucun lien dans ce block ne fonctionnent...

**djoyeux** · 28/09/2007, 22h07

oui c'est bien ça :

Des que je désactive le filtre pour un de mes bloc, les liens sont de nouveau fonctionnelles pour ce dernier.

**HWICE** · 28/09/2007, 22h12

j'ai deja fais quelque chose de la sorte:

pour le css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
#logo{
    position: absolute;
    height: 189px;
    width: 282px;
    top: 0px;
    left: 135px;
    z-index: 10;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/logo.png', sizingMethod='crop');
background: url('images/logo.png') !important;
background: none;
}

et dans le html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="logo"></div>

sauf qu'il me semble que ca bug après dans firefox. J'ai réglé le probleme avec un detect browser et 2 css. Un pour IE et l'autre pour les autres. Je te donne le detect browser en PHP

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?
if (eregi('msie', $HTTP_USER_AGENT) && !eregi('opera', $HTTP_USER_AGENT))
{
// Internet Explorer
$navigateur="Internet Explorer";
}
elseif (eregi('opera', $HTTP_USER_AGENT))
{
// Opera
$navigateur="Opera";
}
elseif (eregi('Mozilla/4.', $HTTP_USER_AGENT))
{
// Netscape 4.x
$navigateur="Netscape 4.x";
}
elseif (eregi('Mozilla/5.0', $HTTP_USER_AGENT) && !eregi('Konqueror', $HTTP_USER_AGENT))
{
// Netscape 6
$navigateur="Netscape 6.x";
}
else
{
// Autres navigateurs
$navigateur="Navigateur inconnu";
}
if($navigateur=="Internet Explorer"){
echo "<link href=\"css/neigeIE.css\" rel=\"stylesheet\" type=\"text/css\">";
}elseif($navigateur=="Opera"){
echo "<link href=\"css/neige.css\" rel=\"stylesheet\" type=\"text/css\">";
}elseif($navigateur=="Netscape 4.x"){
echo "<link href=\"css/neige.css\" rel=\"stylesheet\" type=\"text/css\">";
}elseif($navigateur=="Netscape 6.x"){
echo "<link href=\"css/neige.css\" rel=\"stylesheet\" type=\"text/css\">";
}elseif($navigateur=="Navigateur inconnu"){
echo "<link href=\"css/neige.css\" rel=\"stylesheet\" type=\"text/css\">";
}
?>

Alors j'espère que ca va t'aider

**Bisûnûrs** · 28/09/2007, 22h17

Je n'ai jamais eu ce genre de problème ... :/

**HWICE** · 28/09/2007, 22h24

Bien ce n'ai pas un problème mais bien une solution a djoyeux

**djoyeux** · 28/09/2007, 22h26

J'ai mis en ligne sur mon serveur de test à l'adresse : http://reverb.djoyeux.fr/

Si tu as IE6 peux tu me dire si tu as ce problème aussi ?

**djoyeux** · 28/09/2007, 22h32

Envoyé par HWICE

j'ai deja fais quelque chose de la sorte:

pour le css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
#logo{
    position: absolute;
    height: 189px;
    width: 282px;
    top: 0px;
    left: 135px;
    z-index: 10;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/logo.png', sizingMethod='crop');
background: url('images/logo.png') !important;
background: none;
}

et dans le html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="logo"></div>

sauf qu'il me semble que ca bug après dans firefox. J'ai réglé le probleme avec un detect browser et 2 css. Un pour IE et l'autre pour les autres. Je te donne le detect browser en PHP

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?
if (eregi('msie', $HTTP_USER_AGENT) && !eregi('opera', $HTTP_USER_AGENT))
{
// Internet Explorer
$navigateur="Internet Explorer";
}
elseif (eregi('opera', $HTTP_USER_AGENT))
{
// Opera
$navigateur="Opera";
}
elseif (eregi('Mozilla/4.', $HTTP_USER_AGENT))
{
// Netscape 4.x
$navigateur="Netscape 4.x";
}
elseif (eregi('Mozilla/5.0', $HTTP_USER_AGENT) && !eregi('Konqueror', $HTTP_USER_AGENT))
{
// Netscape 6
$navigateur="Netscape 6.x";
}
else
{
// Autres navigateurs
$navigateur="Navigateur inconnu";
}
if($navigateur=="Internet Explorer"){
echo "<link href=\"css/neigeIE.css\" rel=\"stylesheet\" type=\"text/css\">";
}elseif($navigateur=="Opera"){
echo "<link href=\"css/neige.css\" rel=\"stylesheet\" type=\"text/css\">";
}elseif($navigateur=="Netscape 4.x"){
echo "<link href=\"css/neige.css\" rel=\"stylesheet\" type=\"text/css\">";
}elseif($navigateur=="Netscape 6.x"){
echo "<link href=\"css/neige.css\" rel=\"stylesheet\" type=\"text/css\">";
}elseif($navigateur=="Navigateur inconnu"){
echo "<link href=\"css/neige.css\" rel=\"stylesheet\" type=\"text/css\">";
}
?>

Alors j'espère que ca va t'aider

En faite j'utilise la même solution que toi mais mais lien <a></a> ne fonctionne plus pas de survole ni de clique.

**Bisûnûrs** · 28/09/2007, 22h52

Envoyé par djoyeux

J'ai mis en ligne sur mon serveur de test à l'adresse : http://reverb.djoyeux.fr/

Si tu as IE6 peux tu me dire si tu as ce problème aussi ?

En fait, c'est parce que le filtre Microsoft ne met pas l'image en background. Elle créé une image filtrée directement dans la balise (je vois ça un peu comme ça, même si sur la forme ce n'est pas exactement ça) et donc cette image superpose les autres éléments. C'est pour ça que tu n'as plus accès aux liens, parce qu'ils sont concrètement cachés par un élément créé avec le filtre Microsoft.

**djoyeux** · 28/09/2007, 23h05

arf ça voudrait dire qu'il n'y a pas de solution à mon problème avec ce filtre.

il faut que je regarde du coté de iepngfix.

**HWICE** · 28/09/2007, 23h40

Mais il subsiste un problème plutôt étrange ! Si vous avez essayé de mettre un lien hypertexte au sein de l’élément auquel l’arrière-plan est appliqué (#div, dans mon exemple), ce lien n’est plus cliquable sous Internet Explorer (le même problème survient avec les champs de texte et les éléments qui régissent à hover). Une solution tout simple pour régler ce bug est de placer le lien, ou les liens, en position relative, comme le montre l’exemple ci-dessous :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style type="text/css">
<!--
#div {
        background: url(data/rectangle.png) no-repeat;
        height: 130px; 
        width: 260px;
        margin: auto;
}
#div a {
        position: relative; 
        top: 10px;
        left: 20px;
}
//-->
</style>
<!--[if IE 6]><style type="text/css">
#div {
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='data/rectangle.png');
        background: none;
}
</style><![endif]-->

Voci le code HTML qui va avec le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="div"><a href="http://nayi.free.fr/">Lien hypertexte</a></div>

PNG transparent IE6

CSS

Discussions similaires

Partager

Partager