28173 sujets

CSS et mise en forme, CSS3

Bonjour, voici le trois-millionième problème dû aux bug d'IE6....

J'ai crée un blog récemment visible à cette adresse: http://www.designspartan.com, j'ai déjà réglé de nombreux problèmes relatifs au CSS mais il y a un point qui me rend fou... il y a en tout si je me trompe pas 7 liens-images ( les deux menus du haut et de droite )... ces images sont des rollover gérées par du CSS ( en une image ) et en .png donc avec de nooombreux pixels transparents.... Voila, vous avez surement deviner mon problème.
Ie 6 étant encore utilisés par près de 30 % de la population, ça me semble pas vraiment bien que 6 ou 7 lien-image soient totalement pourris à cause de ce bug...

J'ai recherché sur le net et j'ai découvert plusieurs solution mais aucune qui semblait s'accorder avec le fait que mes images sont dans un CSS, servent de lien et sont en rollover... donc s'il y a une solution simple et pas trop trop contraignante, je suis preneur...

Merci Smiley biggol
Modifié par spartouille (29 Feb 2008 - 18:08)
Salut,

Essaye de les dégrader en gif pour ie6 en commentaires conditionnels, si elles sont dans la css, ce ne dois pas poser trop de problème et c'est à mes yeux une solution palliative la moins douloureuse en terme de dégâts collatéraux Smiley cligne
B'jour,

Donc l'astuce est d'utiliser un commentaire pour IE6 et versions inférieures qui feraient appel a une autre feuille de style "contenant" les mêmes images mais en gif ?

si j'ai bien compris et que c'est donc ça, est-ce que IE6 n'utilisera QUE la feuille de style appelée avec le commentaire ?
Merci beaucoup, la solution marche, j'ai même remplacé mes hack CSS pour IE 7 de cette manière mais malheureusement pour IE6, certains boutons sont hideux en .gif et je ne pense pas que cela soit rattrapable...

En tout cas ca m'a permis de bien avancer... merci Smiley ohwell
Administrateur
Bonjour,

essaie PNGquant (ou Adobe Fireworks si tu l'as) qui pourrait probablement faire du meilleur boulot lors de la réduction à 256 couleurs
Salut,

Il y a bien une méthode un peu biscornue pour passer tout ça en jpg... C'est une recette que j'emploie quelque fois.
Tu gardes tes png et tu te débrouilles de faire des copies d'écran sous firefox ou ie7 (avec MWSnap par exemple, il est gratuit) de chaque item au repos et survolé, il ne te reste plus qu'à faire le montage de ton rollover avec ces images jpg issues de cette capture et incluant donc ton fond... Donc exit la transparence.
Bah ce n'est pas la panacée, il faut être un brin minutieux mais de temps en temps ça dépanne!! Smiley cligne et ce sera toujours moins horrible qu'un gif mal foutu.
Modifié par ghost (01 Mar 2008 - 19:29)
Bonjour, alors j'ai déja tester ces deux solutions Smiley lol mais aucune ne marche.......
Sous fireworks, tout comme sur photoshop, en enregistrant en png-8 ou en gif, en faisant exporter pour le web ou je ne sais pas trop quoi, il reste tjr un affreux bord blanc autour des lettres....
Et pour la technique du rollover en jpeg, j'avais essayé ça en premier sur les boutons de droite, mais en fait c'est bizarre car malgré que le bouton soit " comme avant ", il y a un décalage entre l'image normale et l'image survolée, bref apres 1h30 j'ai oublié...
Je suis presque revenu au point de départ, grace a fireworks, j'ai tranformer les boutons de droite en gif ( le fait qu'il y ait un contour blanc a vomir ne se voit pas ), et là je supprime carrément les 4 images de fond du menu du haut pour ne laisser qu'un simple texte, si il veut bien du moins... et j'ai même pu rajouter un petit " site optimisé pour firefox " dans le footer... Smiley sweatdrop