[Résolu] CSS pour ie6 ne s'applique pas

Question

juliesunset

22 Oct 2009 à 21:11

Bonjour!
Je suis encore sur mon gros projet de site web. Ce dernier est compatible FF et ie7... mais pour ce qui des ie6 c'est franchement laid!

La raison est fort simple, j'utilise beaucoup les effets de transparence pour pas mal tout le site à l'aide d'images png. J'ai convertie la plupart de mes png 24 bits en 8bits, pour que ie6 puisse les interprété à peu près correctement. Mais pour certaines images je doit carrément en créer de nouvelles spécifiquement pour ie6. J'ai entrepris de créer un CSS destiné à ie6.

Je l'appel donc à l'aire d'un commentaire conventionnel... mais voilà elle ne semble pas s'appliquer. Mes sous-menu non plus ne s'affichent pas, malgré le "csshover.htc" appliqué à ma feuille de style en ie6.

En temps normal j'utilise ie7, et je dois tester à l'aide d'IETester.

voilà le site

La différence se situe surtout au niveau du menu du haut et celui du bas.

puis le css pour ie6:


@charset "utf-8";
/* CSS Document */


body{
	behavior: url(../menu.htc);
}

#banner img {
	display: block;
	margin: 0 auto 0 137px;
	padding: 0;
	float:left;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------          debut bande menu -----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
div#menu ul li.accueil{
	position:relative;
	background:url(../interface/images/Site2010-IE6_01.png) top no-repeat;
	list-style: none;
	height:32px;
	width:106px;
	float:left;
}
div#menu ul li.accueil:hover{
	background-position: bottom;
	height:33px;
	width:106px;
}

	/* produits */
div#menu ul li.produits{
	position:relative;
	list-style: none;
	background:url(../interface/images/Site2010-IE6_02.png) top no-repeat;
	height:32px;
	width:110px;
	float:left;
}
div#menu ul li.produits:hover{
	background-position: bottom;
	height:33px;
	width:110px;
}

	/* photos et videos */
div#menu ul li.photos-videos{
	position:relative;
	list-style: none;
	background:url(../interface/images/Site2010-IE6_03.png) top no-repeat;
	height:32px;
	width:179px;
	float:left;
}
div#menu ul li.photos-videos:hover{
	background-position: bottom;
	height:33px;
	width:179px;
}

	/* distributeurs */
div#menu ul li.distributeurs{
	position:relative;
	list-style: none;
	background:url(../interface/images/Site2010-IE6_04.png) top no-repeat;
	height:32px;
	width:148px;
	float:left;
}
div#menu ul li.distributeurs:hover{
	background-position: bottom;
	height:33px;
	width:148px;
}

	/* commande en ligne */
div#menu ul li.commande{
	position:relative;
	list-style: none;
	background:url(../interface/images/Site2010-IE6_05.png) top no-repeat;
	height:32px;
	width:187px;
	float:left;
}
div#menu ul li.commande:hover{
	background-position: bottom;
	height:33px;
	width:187px;
}

	/* support technique */
div#menu ul li.support{
	position:relative;
	list-style: none;
	background:url(../interface/images/Site2010-IE6_06.png) top no-repeat;
	height:32px;
	width:198px;
	float:left;
}
div#menu ul li.support:hover{
	background-position: bottom;
	height:33px;
	width:198px;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------             debut menu du bas -----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#pied li.qui {
	display: block;
	background:url(../interface/images/menu_bas02-IE6-01.png) top;
	float: left;
	width: 153px;
	height: 21px;
	margin: 0;
	padding: 1px 0 0 0;
}
#pied li.contact {
	display: block;
	background:url(../interface/images/menu_bas02-IE6-02.png) top;
	float: left;
	width: 91px;
	height: 21px;
	margin: 0;
	padding: 1px 0 0 0;
}
#pied li.media {
	display: block;
	background:url(../interface/images/menu_bas02-IE6-03.png) top;
	float: left;
	width: 79px;
	height: 21px;
	margin: 0;
	padding: 1px 0 0 0;
}
#pied li.expo {
	display: block;
	background:url(../interface/images/menu_bas02-IE6-04.png) top;
	float: left;
	width: 117px;
	height: 21px;
	margin: 0;
	padding: 1px 0 0 0;
}
#pied li.partner {
	display: block;
	background:url(../interface/images/menu_bas02-IE6-05.png) top;
	float: left;
	width: 116px;
	height: 21px;
	margin: 0;
	padding: 1px 0 0 0;
}

Modifié par juliesunset (23 Oct 2009 - 17:56)

juliesunset

22 Oct 2009 à 21:39

On oublie pour le problème des sous-menu... m'étais trompé de nom de fichier! Smiley kc

raaa des fois!

Pour le reste c'est toujours d'actualité.

fvsch

22 Oct 2009 à 21:54

Bonsoir,

1. Il y a une image de fond qui est un JPEG de 700+ ko. Il devrait en faire 50, 100 au plus. Ouch.

2. On ne fait pas de feuille de styles pour IE6. Ou de feuille de styles pour quelque navigateur que ce soit. Pour IE6 (voire IE7), on peut par contre faire une feuille de correctifs CSS. La nuance est importante. Quelque chose me dit que ce fichier contient beaucoup plus de lignes que nécessaire.

3. IE6 lira les styles destinés à tous les navigateurs. Le principe est donc d'«écraser» ce styles par des styles supplémentaires, destinés à IE6 uniquement, et qui viennent après les styles normaux. Bref, il faut placer la feuille de correctifs CSS après les styles normaux.

4. La syntaxe utilisée pour le commentaire conditionnel est fausse, à vue de nez. Il manque un espace. À vérifier à partir d'une source fiable (Alsacréations, par exemple Smiley cligne

).

5. Je ne commente pas le fait de faire un menu déroulant non accessible au clavier, avec des items de premier niveau non cliquables, sur deux niveaux tant qu'à faire, etc. C'est juste une catastrophe, mais si je commence à expliquer pourquoi on y est encore demain. Et puis je le fais toutes les semaines sur ce forum, je fatigue. Smiley langue

juliesunset

22 Oct 2009 à 22:17

Florent V. a écrit :
Bonsoir,

1. Il y a une image de fond qui est un JPEG de 700+ ko. Il devrait en faire 50, 100 au plus. Ouch.

oui je sais, mais je n<arrive pas à réduire d'avantage la taille sans trop perdre de qualité. J'y travaille encore.

Florent V. a écrit :
2. On ne fait pas de feuille de styles pour IE6. Ou de feuille de styles pour quelque navigateur que ce soit. Pour IE6 (voire IE7), on peut par contre faire une feuille de correctifs CSS. La nuance est importante. Quelque chose me dit que ce fichier contient beaucoup plus de lignes que nécessaire.

Oui oui, c'est bien ça une feuille de correctif. Pour le moment est à beaucoup de lignes, certe, mais j'aimerais d'abord commencé à faire en sorte que les images s'affiche, pour ensuite les repositionné en fonction des lignes déjà inscrites. les restes inutiles sera effacé.

Florent V. a écrit :
3. IE6 lira les styles destinés à tous les navigateurs. Le principe est donc d'«écraser» ce styles par des styles supplémentaires, destinés à IE6 uniquement, et qui viennent après les styles normaux. Bref, il faut placer la feuille de correctifs CSS après les styles normaux.

Chose que j'avais fait à l'origine, pour ensuite la déplacé avant... je fait le correctif et voie ce que ça donne.

Florent V. a écrit :
4. La syntaxe utilisée pour le commentaire conditionnel est fausse, à vue de nez. Il manque un espace. À vérifier à partir d'une source fiable (Alsacréations, par exemple ).

l'espace était présent à l'origine... Smiley rolleyes

je l'avais enlevé pour je ne sais plus quelle raison!

Florent V. a écrit :
5. Je ne commente pas le fait de faire un menu déroulant non accessible au clavier, avec des items de premier niveau non cliquables, sur deux niveaux tant qu'à faire, etc. C'est juste une catastrophe, mais si je commence à expliquer pourquoi on y est encore demain. Et puis je le fais toutes les semaines sur ce forum, je fatigue.

Ta réticence se justifie tout à fait! j'y avais pensé et avait par la suite constaté... mais je ne suis pas programmeuse, et j'aimerais ne pas avoir à utilisé de js sur tout le site. J'ai donc fait un choix. Discutable, certes, mais fallait faire un choix. Et maintenant que mon deadline a été devancé, je n'ais plus le temps d'apporter ce correctif, advenant que je veuille le faire. Donc à moins qu'il existe une solution n'utilisant pas js ou autre chose que du css ou html... je préfère ne pas me cassé la tête pour le moment. Une fois le site implanté je tenterais peut-être...

juliesunset

22 Oct 2009 à 22:44

Les correctifs ont été fait. Maintenant, ça s'affiche correctement.
Merci Florent V.! Smiley biggrin

Mais pour une raison que j'ignore quand je passe devant avec ma sourit le positionnement est affreux. Pourtant les images sont de même dimension que celles d'origine.

Ah et le poids de l'image de fond à diminué de moité. C'est pas mal le mieux que je puisse faire.

juliesunset

23 Oct 2009 à 15:59

Petit up!

J'ai un sérieux problème de dimension de block et de positionnement que je n'arrive pas à corrigé...

Quelqu'un aurait-il une astuce ou autres pour m'aider sur ce coup?

juliesunset

23 Oct 2009 à 17:55

Le problème a été réglé. J'ai dû réajusté mes images pour qu'elles s'ajuste comme il faut dans les boîtes.

Sujet clos

CSS et mise en forme, CSS3

[Résolu] CSS pour ie6 ne s'applique pas