28172 sujets

CSS et mise en forme, CSS3

Bonjour,

j'ai une page html http://test03.christophe-charron.org/public/html/2009_08_06/test_ff.html

avec une feuille de style qui a l'air de fonctionner tout à fait correctement avec FF2, FF3, FF3.5 ,Safari, Opera, Chrome et IE8 (Emulation de safari et IE8 sous XP des navigateurs avec http://www/xenocode.com/Browsers/)

Cette page fonctionne presque sous IE6 et IE7 (Emulation de IE7 sous XP des navigateurs avec http://www/xenocode.com/Browsers/))

J'en ai donc créée une autre http://test03.christophe-charron.org/public/html/2009_08_06/test_ie.html avec une autre feuille de style qui elle fonctionne en effet sous IE6 et IE7, mais pas sous FF3 etc.

Certainement parce qu'en fait dans les 2 pages, l'ordre des balises div contenues dans les balises div xsoft_contenuhaut et xsoft_contenubas sont différents

Dans test_ie.html

		<div id="xsoft_contenu">
			<div id="xsoft_contenuhaut">
				<div id="xsoft_contenuhautcentre"></div>
				<div id="xsoft_contenuhautgauche"></div>
				<div id="xsoft_contenuhautdroite"></div>
			</div>
			<div id="xsoft_contenucentre"></div>
			<div id="xsoft_contenubas">
				<div id="xsoft_contenubascentre"></div>
				<div id="xsoft_contenubasgauche"></div>
				<div id="xsoft_contenubasdroite"></div>
			</div>
		</div>

Et dans test_ff.html

		<div id="xsoft_contenu">
			<div id="xsoft_contenuhaut">
				<div id="xsoft_contenuhautgauche"></div>
				<div id="xsoft_contenuhautcentre"></div>
				<div id="xsoft_contenuhautdroite"></div>
			</div>
			<div id="xsoft_contenucentre"></div>
			<div id="xsoft_contenubas">
				<div id="xsoft_contenubasgauche"></div>
				<div id="xsoft_contenubascentre"></div>
				<div id="xsoft_contenubasdroite"></div>
			</div>
		</div>

Ce qui me paraissait la manière la plus "naturelle" de procéder.

Bien évidemment, avoir 2 pages différentes n'est pas acceptable mais je n'arrive pas à mieux me dépatouiller ...

Auriez-vous des pistes (mieux, une solution Smiley smile ) à me proposer ?

Existe-t'il un équivalent de firebug, pour IE car c'est quand même bien pratique pour mettre en évidence les éléments d'une page ?

D'avance, merci pour vos réponses
Modifié par christophe charron (06 Aug 2009 - 11:55)
Salut,

Je n'arrive pas trop à piger où tu souhaite aller.

Pour ce qui est de tes 2 pages, il faut en effet trouver une solution. Pourquoi ne pas mettre les div dans le meme ordre ?.
Quand tu place tes éléments, tu ne sais jamais trop où ils vont se loger, pour les voir j'ajoute à mes éléments une bordure en CSS. Grace à elle je sais exactement où sont mes bloc et je supprime tout quand j'ai finit.
border: 1px solid red;


Sous IE il existe debugBar http://www.debugbar.com/ pour identifier les éléments de ta page.
Bonjour,
et merci pour la réponse.

Je souhaite trouver une feuille de style qui me permette d'avoir la même apparence pour la même page que ce soit sous FF3, FF2, Safari, Chrome, IE8 et IE6 ou IE7.

Si tu ouvres http://test03.christophe-charron.org/public/html/2009_08_06/test_ff_border.html (qui est la même que la précédemment citée, mais avec la feuille de style qui encadre les balises avec des couleurs différentes) sous IE6 et FF, tu constateras une grosse remontée vers le haut d'un bloc, alors qu'il apparait correctement sous les autres navigateurs.

Le résultat escompté étant http://test03.christophe-charron.org/public/html/2009_08_06/test_ie_border.html (a n'ouvrir que sous IE6 ou IE7 car sinon on a le même problème de remontée de bloc que l'on a avec l'autre page sous IE)

Mais ce "bon" résultat escompté sous IE est la conséquence de l'inversement de l'ordre des balises, comme dit dans le précédent post.

En espérant avoir été plus clair cette fois-ci ??
D'avance, merci pour ton aide.