Multibles essai CSS png IE6

Bonjour,
Première poste au forum!
je sais c'est classique j'ai essaié a maintes reprise de trouver la solutions pour les PNG sous IE6, par les test et sur le net...
voici le site avec son code css, http://www.therapie-aurique.ch/test/index.html
Fonctionne dans tous les autres browsers.
Questions:
1: code testé sans succes:
background-image:url(fichier.png)!important;
background-image:url(no-image);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true sizingMethod='scale', src='images/fichier.png');
background-repeat:repeat-y;
2: img { behavior: url(iepngfix.htc); }
3: img, #header { behavior: url(iepngfix.htc); }
4: * { behavior: url(iepngfix.htc); } en mettant les iepngfix.htc et le blanc.gif dans le dossier
Question: on demande de mettre le hight & widht dans un img mais quand l'image est dans un div et non accesible dans le html comment regler ça dans le css sans casser la mis en page?
si tous ces codes ne fonctionne pas avec mon css comment dire de mettre le gif a la place du png si le browser est IE6? y a t'il un moyen, surement?
Je me suis peut être compliqué ma vie en débutant avec des PNG mais c'est tellement plus jolie !
merci pour l'aide
code css

[#green][/* CSS Document */



/*

*/

* { behavior: url("pngbehavior.htc");}

body {font: 75% Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/sign_pattern.gif);
background-repeat: repeat;
background-attachment: inherit; }



* {margin: 0;
padding: 0; }



img {border: 0; }



p {padding: 5px 0; }



/************************************************/



/* Structure de base                                   */



/************************************************/



#main {position:relative;
width: 750px;
margin: 60px auto 5px auto;
border: 3px solid #663333;
background: #dad7cb url(images/mantra_fond2.png) no-repeat scroll 200px 300px;
text-align: left;
font-weight: normal; }



#top {position: relative;
float:left;
width: 750px;
background: url(images/header.jpg) no-repeat;
padding: 40px 0;
text-align:right;
line-height:30px;
border-bottom: 2px #663333 dotted; }



/*titre Header*/



#top h1 {margin-right: 20px;
color:#663333;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 25px;
font-weight: normal;
font-style: italic; }



#top h2 {margin-right: 20px;
font-size: 16px;
color:#663333;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: italic; }



#mantratopleft {position: absolute;
top: -50px;
left:-60px; }



/*box a droite/news*/



#mantraheader {position: absolute;
top: 180px;
right: -132px;
background:url(images/topbox.png) no-repeat 2px 0px ;
padding-top:35px; }



#boxout {position: relative;
width: 138px;
background-image: url(images/ye.pattern.gif);
border: 2px solid #663333;
color: #663333;
text-align: center;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: italic;
overflow:hidden; }



#news {padding: 12px; }



#topbox {width: 138px;
height: 50px;
bottom: 0px;
font-style:normal;
background:url(images/topbox.png) no-repeat 0px -35px ;
 }



#topbox h3 {padding: 5px 0;
color: #990000; }



#topbox h4 {color: #990000; }



#nav {float: left;
width: 160px;
padding-bottom: 240px;
background: transparent url(images/navbarleft_d4.png) no-repeat scroll left top;
padding-bottom: 240px;
overflow:hidden; }



#content {/*Attention page xxx personnalisee*/
float: left;
width: 540px;
padding: 15px 0px 0px 20px;
margin-bottom: 5em; }



/*titre pour content page*/



titre {font-size: 14px;
color:#663333;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-weight: bold;
font-style: italic;
text-align: center; }



soustitre {font-size: 11px;
color:#003366;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-weight: bold;
font-style: italic;
text-align: center;
line-height: 30px; }



/*quote/citation*/



blockquote {color: #003366;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-style: italic;
font-weight: bold;
font-size: 11px;
text-align: center;
border-bottom: 1px #ff9933 dashed;
padding-bottom: 25px;
padding-top: 13px;
margin-bottom: 13px; }



#footer {width: 100%;
background-color: #663333;
clear: both;
font-size: 10px;
text-align: center; }



/*liens footer*/



#footernav ul {padding-left: 0;
margin-left: 0;
color: #330000;
float: inherit;
width: 100%;
font-family: arial, helvetica, sans-serif;
text-align: center; }



#footernav ul li {display: inline; }



#footernav ul li a {padding: 0.2em 1em;
color: #330000;
text-decoration: none;
border-right: 1px solid #330000; }



#footernav ul li a:hover {color: #ccff99; }



/************************************************/



/* Navigation                                   */



/************************************************/



#nav ul {list-style-type: none;
list-style-image: none;
padding: 55px 10px 0 10px; }



#nav ul li { }



#nav ul li a {display: block;
font-size: 1.2em;
padding: 0.3em 0 0.3em 10px;
color: #ff9933;
font-weight: normal;
text-decoration: none;
border-bottom: 1px #ff9933 dashed; }



#nav ul li a:hover {color:#ccff99;
border-bottom: 1px #ccff99 dashed; }



/************************************************/



/* HTML TITRE                                   */



/************************************************/



h1 {font-size: 22px; }



h2 {font-size: 12px; }



h3 {font-size: 10px; }



h4 {font-size: 9px; }] [/#] 

Modifié par Felipe (13 May 2008 - 15:14)

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté 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 (enfin au moins le contenu du 1 ) afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.



Pour ce qui est des PNG transparents, seuls les PNG-24 avec transparence (c'est à dire les PNG en 16 millions de couleur avec 256 niveaux de plus ou moins grande transparence) sont concernés par ce problème sous IE6.
Les PNG-8 (256 couleurs et dans l'immense majorité des cas 1 "couleur" qui devient entièrement transparente) n'ont aucun souci sous IE6.
Dans ton cas, les 3 images que je peux voir seraient bien mieux en PNG-8 que PNG-24:
- monochrome ou presque
- la transparence simple suffira, il n'y a pas de dégradé de transparence à gérer
- PNG-8 est très souvent plus léger que PNG-24, et est encore plus léger après passage dans OptiPNG

Si tu ne sais pas comment créer des PNG-8, merci de nous dire avec quel programme tu crées tes graphismes ou lesquels tu possèdes/sais utiliser

c'est tout nouveau pour moi, j'ai bien lu les règles avant de poster mais je n'ai pas bien compris les balises des codes, je pense d'avoir fait ça maintenant.
Erreur de débutant
Il est vrai que deux de mes images pourrait se faire en PNG 8, je vais le faire de suite, je ne savais pas que le IE6 accepte ça sans aucun problème, par contre le navigateur de gauche est en dégradé, donc il nécessite un PNG 24, j'utilise photoshop t illustrator CS3 pour ça.
Merci beaucoup pour l'aide.
Nathalie

Si tu as Fireworks, c'est l'outil idéal pour créer un PNG-8 avec un dégradé de transparence (il est le seul à savoir faire ça). Avec ce PNG "hybride", dans IE6 c'est la transparence simple qui s'affiche donc c'est moins joli mais comme c'est uniquement pour ce navigateur et qu'on évite tous ces hacks et que le site reste utilisable, c'est une bonne solution (si on a Firework$$).
Sinon il ne reste que les hacks mais ce n'est pas mon domaine, je ne pourrai pas te répondre

non malheureusement je n'ai pas le Fireworks, mais en faites ce n'est pa le navigateur en transparence qui me pose des problème ces les 3 autres, mais je vais les enregistrer de nouveau mais en PNG 8 et je pense que ça va aller comme ça, merci infiniment.
Pour les filtres Hacks je n'ai jamais réussi....

Tu peux essayer Web Image Guru pour créer un PNG-8 (shareware 14 jours). Ou GIMP ai-je lu.
Web Image Guru a une interface digne de ~1992 (<troll>Gimp aussi d'ailleurs </troll>) mais il donne un bon résultat au final, de ce que j'ai pu en voir après 3-4 tests.

bonjour,
je suis allé regardé mais je ne suis pas encore équipé de Mac intel, donc pas compatible, le Gimp...so so? , mais Photoshop et illustrator CS3 gére très bien les deux, PNG 8 et 24 ! je testera tout ça lundi matin sur IE6.
Merci pour l'aide

Felipe a écrit :
Tu peux essayer Web Image Guru pour créer un PNG-8 (shareware 14 jours). Ou GIMP ai-je lu.

Gimp ne gère pas la transparence graduelle en PNG-8 (PNG paletted alpha transparency). D'après le rapport de bug à ce sujet, ce n'est pas en passe d'être corrigé faute de ressources (personnes capables de coder pour Gimp et connaissant bien le sujet) et d'intérêt (avec la disparition progressive d'IE6, ce format va devenir beaucoup moins intéressant).

Felipe a écrit :
Web Image Guru a une interface digne de ~1992 (<troll>Gimp aussi d'ailleurs </troll>)

Trollons donc: je trouve pour ma part l'interface de Gimp très correcte. Pour être bien utilisée, par contre, elle demande d'avoir une résolution correcte. En 1280x1024 c'est très confortable. En 1280x800 (sur mon portable) ça manque un peu de hauteur, par contre. J'ai été obligé de réorganiser ma barre d'outils de trois zones (outils, calques+canaux+chemins+etc., propriétés des outils) en deux zones (outils, propriétés des outils+calques+canaux+chemins+etc.), et c'est moins évident comme ça. Screenshot tout de même (en 1280x800):



Ce qui est marrant, c'est qu'en comparaison je trouve l'interface de Photoshop très peu claire. Gimp a des boutons assez gros qui prennent de la place, mais qui ont l'avantage d'être explicites sur leurs fonctions. On peut utiliser un thème «small» (installé par défaut, à activer dans les préférences) qui utilise les mêmes boutons en plus petit, mais je trouve ça moins pratique. À l'inverse, Photoshop a des boutons petits (pourquoi pas...) mais surtout assez sibyllins. Il faut presque de l'habitude pour savoir que tel bouton dans le gestionnaire de calques permet d'ajouter un nouveau calque (à voir ici par exemple). L'interface de Photoshop propose des boutons en niveaux de gris, ce qui donne un style très léché et sert, je pense, à proposer un environnement de travail neutre, mais l'absence de couleur (ou le fait d'utiliser toujours la même teinte) n'aide pas à repérer les différents boutons. Donc sacrifice de l'ergonomie sur l'autel de la neutralité colorimétrique.

La plupart des personnes qui me disent que l'interface de Photoshop est très claire sont des gens qui travaillent régulièrement sur ce logiciel. C'est donc un argument assez faible (de même que lorsque je dis que je trouve l'interface de Gimp très claire).

Ce qui est sûr, par contre, c'est que l'interface de Gimp est plus adaptée à Linux qu'à Windows. Le fonctionnement avec fenêtres multiples (une pour les outils, et une pour chaque image ouverte) ne pose pas de problèmes lorsqu'on a réservé (temporairement) un bureau virtuel au travail avec Gimp. Sous Windows, où toutes les applications sont sur le même bureau, c'est un peu la merde. Et les tentatives pour faire de l'interface de Gimp un machin qui ressemblerait à Photoshop ne sont pas terribles (multiples bugs de focus, assez peu utilisables). Donc Gimp sous Windows c'est effectivement assez chiant et plutôt spartiate, surtout avec l'utilisation des dialogues GTK au lieu des dialogues de Windows (ouverture et sauvegarde de fichiers).

(Mince alors, une concession... je suis pas un très bon trolleur moi.)

Et si la solution était qu'on arrête tous les hack IE6 ? Peut être pas ceux qui font pété une mise en page mais tout du moins les bugs "sans conséquence" comme le bug de la transparence des png. Sinon tu peux utiliser une feuille de style conditionnelle pour ie6 et surchargé ta css avec une image spécialement pour ie6 ce qui te permettra de garder ton png de base pour les bons navigateurs