CSS : Mon site est incompatible IE6Résolu/Fermé

Question

Bonjour, j'ai un gros soucis. Je construit actuellement mon site et il est presque opérationnel sauf que sous IE6 mon site a de gros soucis. PNG non transparent, mon menu est décalé... Mon CSS passe parfaitement les test W3C donc je ne comprend pas. J'ai était sur un site pour convertir un CSS pour IE6, mais sans succès. (le site de conversion : http://www.onderhond.com/tools/ie6fixer/ ) J'ai bien fait appel au CSS fixé dans mon header avec la ligne suivante : Mais sa ne marche pas ! Donc, je vais commencer par vous dire mon niveau : NUL Je suis désespéré et je ne m'y connais vraiment pas dans le CSS. Pouvez-vous m'aider ? PS : http://ww1.ultrashare.net (Lien de mon CSS non corrigé donc entier). Merci d'avance

sp00m` · Accepted Answer

Un site compatible IE6 n'est pas une priorité, mais juste un plus je pense. Personnellement, je ne développe plus sous IE6, tout comme youtube qui arrête sa compatibilité IE6.

Pour ce qui est de la transparence, IE6 ne supporte simplement pas la transparence en PNG. Il faut soit utiliser le format PNG8 (https://www.alsacreations.com/article/lire/81-transparence-png-ie6.html soit le GIF.

Titial69 · Answer

Si tu n'a pas prévu IE6 dès le départ, il va falloir refaire un css rien que pour ie6 pour corriger tous les défauts sous ie6.

La plupart du temps ce qui déconne sous ie6 se sont les margin et les padding (surtout la ou tu ne les a pas mis, il va falloir rajouter des padding: 0;)

C'est pas compliqué, il faut être patient, et y aller étape par étape, un problème à la fois, et à la fin ton site sera tout beau, meme sur IE6...

hom33r · Answer

Bonjour,

merci de votre réponse.

Je vais faire comme sa, je vais refaire le CSS en corrigeant ce qui BUG.

Mais pour la transparence des images PNG je fais comment ?

J'ai déjà essayé un JS et quelques autre code dans le CSS mais sans sucés.

hom33r · Answer

Petit soucis !

Afin de facilité ma correction CSS, j'ai demandé a Dreameaver 8 d'analysé mon CSS pour IE5 et IE6.

Il m'a trouvé seulement 5 erreurs que voici :

Sur cette balise :
#menu .menu_nn ul li {
background-image : url('images/BlockContentBullets.png');
width : 170px;
margin : 0.5em 0 0.5em 10;
margin-left : -35px;

Dreamweaver me dit : 
La valeur '10' n'est pas prise en charge pour la propriété CSS margin [Microsoft Internet Explorer 5.0, Microsoft Internet Explorer 5.5, Microsoft Internet Explorer 6.0, Netscape Navigator 6.0, Netscape Navigator 7.0, Netscape Navigator 8.0]

Donc la correction pour moi est la suivante (je pense) :
#menu .menu_nn ul li {
background-image : url('images/BlockContentBullets.png');
width : 170px;
margin : 0.5em 0 0.5em 10px;
margin-left : -35px;


Mais après je galère avec mes 4 autres erreurs, qui sont les mêmes :
La prise en charge des valeurs top, text-top, middle, bottom et text-bottom de la propriété CSS vertical-align est incomplète ; ces valeurs risquent de ne pas produire l'effet souhaité. [Microsoft Internet Explorer 5.0, Microsoft Internet Explorer 5.5]

Cette erreur est provoqué pour les balises suivante de mon CSS :
#content #corps p.suite a {
color : #232323;
vertical-align : text-top;
}

.art-PostHeaderIcon-wrapper img {
border : none;
vertical-align : middle;
margin : 0;
padding : 0;
}

.art-metadata-icons img {
border : none;
vertical-align : middle;
margin : 2px;
padding : 0;
}

.art-metadata-icons img {
border : none;
vertical-align : middle;
margin : 2px;
}

Mais la je galère !

Je ne sais que mettre pour corrigé ces erreurs !

Pouvez-vous m'aider ?

Merci d'avance !

hom33r · Answer

Oui je sais bien que IE est vieux et peux utilisé mais c'est pour rendre mon site un max compatible.

Et ok pour les PNG ;) Merci !

hom33r · Answer

J'avais tester des scripts (plusieurs) et aucun n'a marcher :(

hom33r · Answer

Voilà, pour éviter de refaire un CSS j'ai rajouté une détection de navigateur.

Lorsque IE6 ou une version antérieur est détecté, mon site affichera en haut de page une bande jaune demendans de mettre à jour le navigateur ou de le changer parmi Mozilla Firefox, Opera, Google Chrome...

Je pense que se sera mieux ;)

Merci à vous tous ;)

Dan · Answer

IE6 ne prend pas les png... je te propose un petit script qui tu place dans ton et qui comme par magie va transformer tes png ;) Il suffit juste d'indiquer la classe, l'id ou l'élément visé... Exemple: Comme tu vois il y a également un script à appeler en parallèle...mais bon... à coup de une ou deux recherches tu le trouves...vais pas le recopier ici... J'espère que j'aurai pu en aider certains!

CSS : Mon site est incompatible IE6

8 réponses

Discussions similaires

Newsletters