[Résolu] Site Ok sous Firefox, mais sous IE 6.0 ..... !!

Bonjour à tous,

Voilà, je développe un site sur la médecine esthétique pour ma soeur.
Et il se trouve que je check à chaque fois que je fais une évol de style sous Firefox et sous IETab, extension de Firefox qui donne le rendu sous IE 6.0.

J'héberge, à titre de test seulement, le développement de ce site sous un répertoire, à partir de mon propre site, soit à l'adresse suivante :

http://www.johanchouquet.com/php

Mon problème est que tout va bien sous FireFox, mais sous IE, c'est une catastrophe pour 3 raisons:
- le logo utilisé, avec fond blanc sous Firefox, se révèle avec fond grisatre sous IE ,
- la 1ère section (sur le style switcher et la politique d'accessibilité) se trouvent décalés sous IE ,
- et enfin et surtout, le bloc de contenu (le texte) se trouve en dessous du bloc du menu sous IE .

Donc ça va pas du tout. Quelqu'un aurait-il des idées pour résoudre ces différents problèmes ?

Par avance, merci à tous, et merci à Alsacreation et Openweb qui m'aident bien je dois dire !
Modifié par Dargoan (18 Apr 2007 - 19:28)

Bonjour,

Pour le logo, voir dans la faq ou ton ami google pour la gestion des png pour ie6
Pour ton décalage à vu de nez c'est un bug connu d'IE6 3px jog bug qui rajoute 3 px au bloc flottant, donc il devient trop "large" et passe "dessous".

salut Dargoan,

Pour ton logo cela vien du format "png", utilise un "gif" ou un "jpg".
Pour ton problème de contenu, essaye peut etre de mettre un "z-index:100;"
dans ton css pour "#contenu".
Modifié par adri1 (16 Apr 2007 - 20:52)

Dargoan a écrit :

- le logo utilisé, avec fond blanc sous Firefox, se révèle avec fond grisatre sous IE

Si tu souhaites conserver ton logo en .png, hop un commentaire conditionnel sur ta page :

<!--[if lte IE 6]>
	<LINK REL="stylesheet" HREF="ie6.css" TYPE="text/css" />
<![endif]-->

et le hack dans ie6.css :

*html #balise_qui_contient_limage { /* N'est lu QUE par IE */
background-image:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[i]ton_image[/i].png', sizingMethod='scale'); }

Et voilà

Par contre il se peut que ton lien ne fonctionne plus une fois le hack mis en place, pour remédier à ce problème rajoute ça sur le lien en question :

a {
position: relative;
z-index: 1; }

Modifié par BeliG (16 Apr 2007 - 11:32)

Salut,
@BeliG

Sans vouloir te vexer, il me semble assez paradoxal d'utiliser un commentaire conditionnel avec un hack !! Ou le commentaire (glop) ou le hack (pas glop du tout) et surtout une css à part pour ie6 pour 2 lignes de code.

<!-- [if IE 6]>
	<style>
		#balise_qui_contient_limage {
		background-image:none; 
		filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='ton_image.png', sizingMethod='scale');
		}
	</style>
<![endif]-->
        

Sous réserve que le code fonctionne

ghost a écrit :

...et surtout une css à part pour ie6 pour 2 lignes de code.

Je suis d'accord, mais si il a d'autres images en .png à gérer ou tout simplement d'autres bugs à corriger j'trouve ça mieux d'avoir une feuille supplémentaire spéciale IE...

ghost a écrit :

il me semble assez paradoxal d'utiliser un commentaire conditionnel avec un hack

Et pourquoi ??

Re,

Ben chez moi c'est ou un (rare hack) ou l'autre
Si tu utilises une css spécial ie6, tu n'auras pas besoin de hacks vue qu'elle lui sera destinée ...
Si tu utilises des hacks tu n'a pas besoin de feuille "spéciale" ie6 puique tes hacks ne sont interprétés que par ie6...

Alors ou un ou l'autre non?

A lire

Re bonjour,

Merci à vous !
Je vais voir effectivement pour les png. Peut-être vais-je les transformer en jpg...

Pour ce qui est du bloc de contenu, je vais essayer de jouer comme l'a indiqué Ghost. C'est vicieux quand même je trouve. Il faut beaucoup de temps pour maîtriser toutes ces suptilités. Mais le jeu en vaut la chandelle je trouve.

Merci à vous, je vous tiens au courant.

Sinon, que pensez-vous du code (sémantiquement parlant ou autre)?

Bonjour encore, ou bonsoir plutôt, ou bonne nuit, je ne sais plus !

Bon, voilà, j'ai corrigé les points 2 et 3 (de mon message initial) au prix de quelques heures de travail, et d'autant en moins de sommeil .

Finalement, j'ai opté pour la solution décrite sur le site d'OpenWeb à propos du positionnement en float. Ca ma donné des bonnes idées.

Encore merci à Ghost et BeliG pour leur aide qui m'a inspiré également, ainsi qu'à la FAQ d'Alsa !

Dargoan a écrit :
Encore merci à Ghost et BeliG pour leur aide qui m'a inspiré également, ainsi qu'à la FAQ d'Alsa !

J'en déduis donc que tu considères ton sujet comme [Résolu] ?

Euh,

oui, tout à fait ! Je n'ai pas encore essayé de changer le png en jpg ou intégrer le png dans ie, mais pour le reste, c'est ok maintenant.

Merci encore à tout le monde !!