Bonjour à tous.
Je me tourne vers vous car je rencontre quelques difficultés quant à l'utilisation de plusieurs images png sur une même page sous IE6.
Un des tutos de ce site m'avait permis de trouver la solution pour enlever le cadre gris qui apparaissait quand on utilisait un png sous IE6 avec la commande

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="Images/mon-image.png", sizingMethod="scale");



Seulement voila, comment fait on quand dans une même div, par exemple, on souhaite mettre plusieurs png.
J'ai essayé de mettre plusieurs fois la ligne de code ci-dessus en changeant le nom de mon image mais cela ne semble pas fonctionner.

Donc si quelqu'un voit la solution, je ne suis pas contre un pti coup de main. merci.
Modifié par dread (24 Apr 2007 - 11:49)
On peut voir ce que tu as fait côté HTML et CSS ? Quel code HTML pour appeler les images, quel code CSS correspondant, etc.
Du côté du html ou plutot de la page php, ca donne ca:


<div id="fiche">

<table class="fiche1" height="200px" cellpadding="0" cellspacing="0">
		<tr><?php if ($row_rs_fiche['url_photo2']!= '') { echo '
			<td class="photo1" rowspan="6" width="270px" height="200px"><img src="'.$row_rs_fiche['url_photo1'].'" title="'.  $row_rs_fiche['titre_photo1'].'"/></td>';}?>
			<td rowspan="6" width="20px"></td>
			<td width="440px" height="50px"><h1><?php echo $row_rs_fiche['nom_etab']; ?></h1></td>
		</tr>
		<tr><td width="440px" height="25px"><?php echo $row_rs_fiche['adresse_etab']; ?></td></tr>
		<tr><td width="440px" height="25px"><?php echo $row_rs_fiche['cp_etab']; ?> <?php echo $row_rs_fiche['ville_etab']; ?></td></tr>
		<tr><td width="440px" height="30px">Téléphone : <?php echo wordwrap($row_rs_fiche['tel_etab'],2,' ',1); ?></td></tr>
		<tr><td width="440px" height="70px"><a href="contact-partenaire.php?num=<?php echo $row_rs_annonceur['etab_id']; ?>" title="Ecrire au contact"><?php if($row_rs_fiche['url_contact']==""){ echo "";}else{ echo '<img src="Images/annonceur/icone-info/icone-contact.png" alt="Ecrire au contact" class="image"/>';}?></a>
		<a href="<?php echo $row_rs_fiche['url_site']; ?>" title="Aller sur le site" target="_blank"><?php if($row_rs_fiche['url_site']==""){ echo "";}else{ echo '<img src="Images/annonceur/icone-info/icone-site.png" alt="Aller sur le site" class="image"/>';}?></a>
		<a href="http://maps.google.com/maps?f=q&hl=fr&q=<?php echo $row_rs_fiche['url_latitude']; ?>+<?php echo $row_rs_fiche['url_longitude']; ?>&ie=UTF8&z=12&om=1&iwloc=addr" target="_blank" title="Voir sur un plan"><?php if($row_rs_fiche['url_latitude']==""){ echo "";}else{ echo '<img src="Images/annonceur/icone-info/icone-plan.png" alt="Voir sur un plan" class="image"/>';}?></a>
		<a href="http://develop.web.free.fr/video_flash.php?num_camping=<?php echo $row_rs_fiche['id_camping']; ?>" title="Voir la vidéo" target="_blank"><?php if($row_rs_fiche['url_video']==""){ echo "";}else{ echo '<img src="Images/annonceur/icone-info/icone-video.png" alt="Voir la video" class="image"/>';}?></a></td></tr>
		
</table>
</div>

et du coté du css de la div et de la table:


div#fiche h1{
font-size: 20px;
}
div#fiche p{
margin: 17px 0;
}
div#fiche {
position: absolute;
padding: 5px;
left:275px;
height:507px;
width:705px;
font-size:13px;
overflow:auto;
/*background:#FF0000;*/
text-align:justify;
}
.image {
border=0;
}

Modifié par dread (24 Apr 2007 - 14:13)
Bla bla bla code PHP bla bla pas lu par les navigateurs bla bla inutile.

Merci de donner le code HTML correspondant, ou l'URL de la page en ligne, enfin bref un truc utile, quoi. Smiley cligne

Et sinon :
.image {
border=0;
}

Penses à valider ta feuille de style CSS. Là, tu as une grosse erreur de syntaxe.
Je suis juste allé trop rapidement à recopier le code pour le border.
Sinon, voici le code html de la partie de la page qui affiche les png:

<div id="fiche">

<table class="fiche1" height="200px" cellpadding="0" cellspacing="0">
		<tr>
			<td class="photo1" rowspan="6" width="270px" height="200px"><img src="Images-01.jpg" title="disco piste 1"/></td>			<td rowspan="6" width="20px"></td>
			<td width="440px" height="50px"><h1>Mouss disco</h1></td>
		</tr>
		<tr><td width="440px" height="25px">30 rue de la piste</td></tr>
		<tr><td width="440px" height="25px">85300 CHALLANS</td></tr>
		<tr><td width="440px" height="30px">Téléphone : 02 51 56 78 90</td></tr>
		<tr><td width="440px" height="70px"><a href="contact-partenaire.php?num=" title="Ecrire au contact"><img src="icone-contact.png" alt="Ecrire au contact" class="image"/></a>
		<a href="http://www.google.fr" title="Aller sur le site" target="_blank"><img src="icone-site.png" alt="Aller sur le site" class="image"/></a>
		
		
</table>
<p><b>Description : </b>hbds chjbds vjh dqsvhb hjvsbjh dsvhjb djshvbdjhs vjhdb vdqsv hbds chjbds vjh dqsvhb hjvsbjh dsvhjb djshvbdjhs vjhdb vdqsv hbds chjbds vjh dqsvhb hjvsbjh dsvhjb djshvbdjhs vjhdb vdqsv hbds chjbds vjh dqsvhb hjvsbjh dsvhjb djshvbdjhs vjhdb vdqsv hbds chjbds vjh dqsvhb hjvsbjh dsvhjb djshvbdjhs vjhdb vdqsv hbds chjbds vjh dqsvhb hjvsbjh dsvhjb djshvbdjhs vjhdb vdqsv hbds chjbds vjh dqsvhb hjvsbjh dsvhjb djshvbdjhs vjhdb vdqsv hbds chjbds vjh dqsvhb </p><table class="fiche2" cellpadding="0" cellspacing="0">
	<tr><td class="titre2" width="490px" height="20px">Evènements :</td>

			<td class="photo2" rowspan="3" width="267px" height="200px"><img src="Images/annonceur/discotheque/139-discotheque-02.jpg" title="Disco piste 2"/></td>
		</tr>	
	<tr><td class="cadre2" width="490px" height="180px" valign="top">hbds chjbds vjh dqsvhb hjvsbjh dsvhjb djshvbdjhs vjhdb vdqsv hbds chjbds vjh dqsvhb hjvsbjh dsvhjb djshvbdjhs vjhdb vdqsv hbds chjbds vjh dqsvhb hjvsbjh dsvhjb djshvbdjhs vjhdb vdqsv hbds chjbds vjh dqsvhb hjvsbjh dsvhjb djshvbdjhs vjhdb vdqsv hbds chjbds vjh dqsvhb hjvsbjh dsvhjb djshvbdjhs vjhdb vdqsv hbds chjbds vjh dqsvhb hjvsbjh dsvhjb djshvbdjhs vjhdb vdqsv hbds chjbds vjh dqsvhb hjvsbjh dsvhjb djshvbdjhs vjhdb vdqsv hbds chjbds vjh dqsvhb hjvsbjh dsvhjb djshvbdjhs vjhdb vdqsv hbds chjbds vjh dqsvhb hjvsbjh dsvhjb djshvbdjhs vjhdb vdqsv hbds chjbds vjh dqsvhb hjvsbjh dsvhjb djshvbdjhs vjhdb vdqsv hbds chjbds vjh dqsv</td></tr>
	
</table>
			
		</div>


et je redonne le code css lié aux éléments ci-dessus:
.image {
	border: 0px;
	}
div#fiche h1{
font-size: 20px;
}
div#fiche p{
margin: 17px 0;
}
div#fiche {
position: absolute;
padding: 5px;
left:275px;
height:507px;
width:705px;
font-size:13px;
overflow:auto;
/*background:#FF0000;*/
text-align:justify;
}


Je n'ai pas encore mis le site ni la page en ligne.
Désolé pour le blabla!!
Un autre souci que je viens de repérer, c'est que mes images étant des liens, ce ne sont pas des png de fond. Du coup je ne sait pas si le filter proposé est adéquat.
dread a écrit :
Un autre souci que je viens de repérer, c'est que mes images étant des liens, ce ne sont pas des png de fond. Du coup je ne sait pas si le filter proposé est adéquat.

Il ne l'est pas. Ce qui explique sans doute tes soucis. Smiley cligne
bonjour à tous, j'utilise wordpress que j aime bien comme dotclear.

je bidouille pas mal les themes ce qui doit causer quelques soucis
j'ai donc fait mon themes domax4u le nom de ma boite jusque la je ne m'inquietais ps des standards mais les clients demandent alors je dois m y mettre je l' ai mis sur mon site mais voila il y a des erreurs que je ne comprends pas. les problemes bandeau flash tout ca j ai réglé.

il y aussi du php dans wordpress
bon en fin voilà mes codes si quelqu'un peut m aiguiller.

<!--le code du header-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">



<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<!--icone du nav-->

<link rel="shortcut icon" href="http://www.domax4u.com/favicon.ico"/>


<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' _Agence web_'; } ?> <?php bloginfo('name'); ?></title>

<meta name="keywords" content="création de site web, création de site Internet, agence web, web agency, référencement site Internet, css, html, xhtml, w3c, standards, styles CSS, style, conception web, menu css, gabarit, web design, Internet, stratégie Internet, site flash, développement Internet, refonte site Internet, identité visuelle Internet, communication Internet, référencement naturel, formations, conseils, action script,flash, photoshop, photographe, vidéaste" />

<meta name="description" DOMAX4U conception de sites web, HTML , CSS conformes aux standards W3C, codeveloppement, référencement, design, refonte de sites, CMS adapté, formations" />

<meta name="subject" content="DOMAX4U, agence WEB, codéveloppement de sites internet, standards du web"/>
<meta name="author" CONTENT="Domax4u" />

<meta name="revisit-after" CONTENT="1 days" />

<meta name="identifier-url" CONTENT="http://domax4u.com"/>

<meta name="reply-to" CONTENT="contact@domax4u.com"/>

<meta name="robots" content="all" />


<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />


<!--we need this for plugins-->
<?php wp_head(); ?>
</head>
<body>
<!--testflash-->
<div id="headerimage">

<div align="left">
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
width="1040" height="140" align="center">
<param name="movie" value="<?php bloginfo('template_url'); ?>/logo.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="<?php bloginfo('template_url'); ?>/logo.swf" width="1040" height="140"
align="center" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" wmode="transparent"></embed>

</object>
</div>
<!--finflash-->

<div id="container">


<div id="menu">
<ul>

<?php wp_list_pages('depth=1&title_li=&sort_column=menu_order&exclude=1,6'); ?>
</ul>
</div>



<!--header.php end-->





<!--le code css-->


/*  
Theme Name: domax4u
Author URI:  http://www.domax4u.com
 
Version: 1.0
Author: Laurent Benkemoun
Description: Domax , theme facon site sans commentaires ni rss, pages en menu haut et sidebar, 1 categorie
The CSS, XHTML and design is released under GPL: 
 http://www.opensource.org/licenses/gpl-license.php
 
*/

body {
        
	background: #FFFFFF;
	color: #666666;
	font-size: 12px;
	font-family: Helvetica, Arial, Sans-Serif;
	margin: 5px 5px 5px 5px;
	}
a, a:visited{
        color: #50281a;
	font-size: 12px;
	font-family: Helvetica, Arial, Verdana, Sans-Serif;
	font-weight:bolder;
	text-transform: uppercase;
	margin-bottom: 10px;
        line-height:150%;
        text-decoration: none;
	
	}
	
a:hover{
	color: #A9A8A8;
	font-size: 12px;
	font-family: Helvetica, Arial, Verdana, Sans-Serif;
	font-weight: bold;
	text-transform: uppercase;
        
	margin-bottom: 10px;
	
	}
#container {
        
             
	width: 960px;
       	text-align: left; 
	margin: 0 auto; 
	}

#header { 
        
	padding: 0px 0px 0px 0px;
	}


#menu { 
        
        width:960px;
        height:50px;
        align:center;
        background-image:url(/wp-content/themes/domax4u/images/template/menu_haut.jpg);
        
        background-repeat:no-repeat;
        background-position:bottom;
        font-weight: bold;        
       	margin-top:5px;
        margin-bottom:5px;
	color: #50281a;
	font-size: 16px;
	font-family: Helvetica, Arial, Sans-Serif;
	font-weight: bolder;
        text-align: center;
        vertical-align:bottom;
        

        
	}
#menu h2 {
        font-weight:bolder;
        font-size:16px;
       	margin: 0px;
	padding: 0px 0px 0px 0px;
	}
#menu li {
        
        background-repeat: no-repeat;
        background-position:center;
        
	display: inline;
	list-style-type: none;
	margin: 5px;
	padding: 10px;
	}
		
#menu ul {
        
       	margin: 0px;
	padding: 4px;
	}
	
#menu ul li a {
       
       	color:#50281a;
	padding: 0px 40px 0px 40px;
	margin-top: 10px;
	text-decoration: none;
        
	}

#menu ul li a:hover {
        
    font-size:12px;
	color: #A9A8A8;
	text-decoration: none;
        
	
	}


#content {
        
        background-image:url(/wp-content/themes/domax4u/images/template/content_bkg.jpg);
        background-repeat:no-repeat;
        background-position:top;
	width: 550px;
        
        
	float: right;
        
	margin-bottom: 20px;	
	margin-top: 20px;
	padding: 10px 30px 15px 30px;


	}
#content p{
        
        
	margin-top: 10px;
	line-height: 160%;
	padding: 0px 0px 15px 0px;
	}
	
#content p img{
        
	border: none;
	margin-right: 5px;
	}
#content h1 {
	color: #50281a;
	font-size: 16px;
	font-family: Helvetica, Arial, Verdana, Sans-Serif;
	font-weight: bold;
	text-transform: uppercase;
	margin: 0px;
	line-height: 150%;
	}
	
#content h1 a  {
	color: #50281a;
	font-size: 16px;
	font-family: Helvetica, Arial, Verdana, Sans-Serif;
	font-weight: bold;
	text-transform: uppercase;
	margin: 0px;
	line-height: 150%;
	}

#content h1 a:hover {
	color: #A9A8A8;
	text-decoration: none;
	}

#content h2 {
	color: #50281a;
	font-size: 16px;
	font-family: Helvetica, Arial, Verdana, Sans-Serif;
	font-weight: bold;
	text-transform: uppercase;
	margin: 0px;
	line-height: 150%;
	}
#content h2 a  {
	color: #50281a;
	text-decoration: none;

	}

#content h2 a:hover {
	color: #A9A8A8;
	text-decoration: none;
	}

blockquote{
        
	margin: 0px 0px 0px 25px;
	padding: 0px 25px 0px 10px;
	font-style: italic;
	color: #666666;
	border-left: 1px solid #cccccc;
	}
	
#content blockquote p{
	margin: 0px 0px 20px 0px;
	padding: 0px;
	}

.postspace {
	background: #FFFFFF;
	width: 440px;
	height: 32px;
	margin: 0px;
	padding: 0px;
	}
.postspace2 {
	background: #FFFFFF;
	width: 440px;
	height: 0px;
	margin: 0px;
	padding: 0px;
	}

.comments h3 {
	font-family: Arial, Sans-Serif;
	margin-bottom: 10px;
}
.comments ol, .comments ol li {
	list-style-type: none;
}
.comments ol li {
	margin: 5px 40px 5px 0px;
	padding: 10px;
	border: 1px solid #003053;
	background: #F2F2F2;
	overflow: hidden;
}
* html .comments ol li {
	word-wrap: break-word;
}

#sidebar { 
        background-image:url(/wp-content/themes/domax4u/images/template/menu_bkg.jpg);
        background-repeat:no-repeat; 
        background-position:top;      
       	width: 270px;
        height:750px; 
	
	float: left; 
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 10px 10px 15px 30px; 
	}

#sidebar h2 {
        
        
        
	color: #50281a;
	font-size: 16px;
	font-family: Helvetica, Arial, Verdana, Sans-Serif;
	font-weight: bold;
	text-transform: uppercase;
	list-style: none;
	padding: 5px 0px 5px 0px;
	margin: 0px;
        
        
	}

#sidebar ul {
               
        
	list-style: none;
	margin: 0px;
	padding: 0px 0px 20px 15px;
	}
	
#sidebar li {
        
           
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#sidebar ul li {
        
        
	list-style-image:url(/wp-content/themes/domax4u/images/template/logonav-copie.jpg);;
	margin: 0px;
	padding: 5px 0px 0px 0px;
	}
	
#sidebar ul li a {
        
        
	color: #50281a;
	text-decoration: none;
	}

#sidebar ul li a:hover {
        
        
	color: #A9A8A8;
	text-decoration: underline;
	}

#footer {
        
        
	border-top: 10px solid #50281a;
	clear: both;
	padding: 15px; 
	text-align: center;
	}


et la validation w3C : http://validator.w3.org/check?uri=http%3A%2F%2Fdomax4u.com%2F&charset=%28detect+automatically%29&doctype=Inline&No200=1

sur des mots des virgules il me met ceci is not a member of a group specified of any attribute ????? que faire !!
oui je sais c un peu la pagaille css mais je vais nettoyer à la fin je test des backround-image du coup des background-repeat trainent lol !!
Salut,

à flashspeed :
En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté partiellement l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne
Salut,

à flashspeed :

Comme t'indique gentillement w3c --> 50 Erreur !
Le problème viens justement de ces erreur ! corrige les !
Je préfère mettre les metas moi-même.
Je peux au moins gérer plus de choses...

Laurent

<Edit par Florent V. : merci de relire la règle 17 et d'éviter de caser systématiquement le lien vers votre site, quels que soient vos impératifs de visibilité. Smiley cligne />
Modifié par Florent V. (18 Jun 2007 - 10:24)
Un autre petit problème pour les utilisateurs de Xiti gratuit
le code n'est pas propre et non W3C donc après avoir corrigé toutes mes erreurs il m'en, reste six j'ai écris à xiti qui m' a dit vous pouvez changer de code prenez le strict html !

Pareil des erreurs mais il fonctionne bien m'ont-il dit alors que faire?
Serait-ce pour nous faire prendre la version payante ?

domax4u
Modifié par Florent V. (18 Jun 2007 - 10:24)
La validation est un outil et pas un impératif absolu. Si tu as localisé les erreurs, que tu ne peux pas les corriger mais qu'elles ne sont pas problématiques, tout va bien. Smiley cligne

Le code compatible HTML Strict proposé par XITI pose également des problèmes de validation ?
J'aurais peut être du m'abstenir mais avec ce javascipt, tes problèmes devrait être résolu :


/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
 http://homepage.ntlworld.com/bobosola.  Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) 
{
   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 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + 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
      }
   }
}
[/i]