[Résolu] Pb d'alignement sous Firefox (OK avec IE...)

Bonjour

La semaine passée j'ai du mettre en ligne mon nouveau site web (refonte intégrale de mon plus ancien site !) mais sans avoir résolu un problème majeur... sur la page d'accueil (!) de ce dernier !

Je n'arrive pas à obtenir les mêmes résultats sur IE et Firefox, ce dernier me posant pour ainsi dire quelques soucis.

-http://www.chatterie-koolkat.com

J'ai accessoirement des pbs d'alignement des "puces" dans mes balises H2 (voir pages femelles maine coons par exemple) mais c'est moins grave...

Une aide est bienvenue !
Modifié par cedric_g (23 Oct 2006 - 14:03)

Bonjour,

A première vue, FF trouve qu'il a assez de place pour se loger entre ton float:left et ton float:right (alors que IE lui préfère afficher le texte après avoir fait le float:right).
J'essaierai de faire un float:left sur la photo

<div style="float:left;width:200px; margin-top: -8px;">
					<img src="images/sphynx-chasseur.jpg" alt="Sphynx chassant dans l'herbe">				</div>			
				

Normalement, le texte doit du coup descendre sous FF, puisqu'il aura bien collé les deux float:left.

Autre possibilité, donner à ton texte une largeur qui l'empêche de se mettre à droite (mais de fait il ne se mettra pas non plus à gauche de la photo et descendra en dessous des deux).


Sans garantie...

CT

Merci pour le tuyau... malheureusement ça ne "colle" pas

=> -http://www.chatterie-koolkat.com/index2.php (page dont je me sers pour les tests)

Je n'arrive pas à cerner la philosophie de Firefox ! Autant sous IE la corrélation entre le code et le résultat est logique, autant sur FF... Je n'ai pas Opera mais "on" m'a dit que ça collait bien sous ce navigateur aussi. Il n'y aurait donc que FF qui emm... le monde

cedric_g a écrit :
Je n'arrive pas à cerner la philosophie de Firefox !

L'application des standards du web tels que définis par le W3C ? C'est d'ailleurs le philosophie générale, dont IE se rapproche avec la version 7...

cedric_g a écrit :
Autant sous IE la corrélation entre le code et le résultat est logique, autant sur FF... Je n'ai pas Opera mais "on" m'a dit que ça collait bien sous ce navigateur aussi. Il n'y aurait donc que FF qui emm... le monde

Je te conseille d'avoir Opera : c'est gratuit, et c'est multiplateforme... enfin, ça te fera un deuxième navigateur « globalement respectueux des standards » pour faire tes tests et déterminer si une différence de comportement entre Firefox et IE est dû à une lubie de Firefox (cas rare, mais ça peut arriver), ou à un bug d'IE (cas le plus fréquent).

De plus, pouvoir tester toi-même te sera utile. Par exemple, dans le cas présent, Opera 9 présente le même rendu que Firefox 1.5.

En attendant, j'ai l'impression que tu as de gros soucis de dépassement de flottants, significatifs d'une incompréhension des caractéristiques du comportement flottant.
Quelques révisions :
http://openweb.eu.org/articles/initiation_float/
http://www.covertprestige.info/ressources (voir la rubrique « CSS : Les flottants », et en particulier les pages sur le dépassement des flottants).

Merci

J'ai résolu la majorité de mes problèmes ! En faitje voyais une complication là où il n'y en avait pas !!!


Sur les balises H2, j'ai aussi résolu mon petit soucis de puce (avec un "clear:left;" très efficace), par contre FF ne semble pas "comprendre" mes marges et me colle le contenu juste au-dessus de mes balises ???

cedric_g a écrit :
Sur les balises H2, j'ai aussi résolu mon petit soucis de puce (avec un "clear:left;" très efficace), par contre FF ne semble pas "comprendre" mes marges et me colle le contenu juste au-dessus de mes balises ???

La marge s'applique-t-elle à un élément qui jouxte un flottant ?
Si c'est le cas, c'est normal : les flottants, par défaut, ne repoussent pas les éléments de type bloc, mais uniquement leur contenu en-ligne (texte, images).

Exact.

Et heu... il y a une solution ? Je suppose qu'elle n'est pas du côté de ma balide Hx ?

Si je mets effectivement un "display:inline;" dans ma balise H2, les deux navigateurs rendent la même chose... mais ce n'est pas la bonne chose car là les deux navigateurs me squizzent mes marges !

Grrrr je vais y arriver...
Modifié par cedric_g (23 Oct 2006 - 14:55)

cedric_g a écrit :
Grrrr je vais y arriver...

Au risque de me répéter : http://www.covertprestige.info/ressources et voir la rubrique « CSS : Les flottants ».
À voir avec un navigateur qui interprète les flottants correctement, de préférence (Firefox, Opera). Ensuite, on pourra se pencher sur les bugs d'IE6 dans la gestion des flottants :
http://www.test.blog-and-blues.org/haslayout/tests/float1.html
http://www.test.blog-and-blues.org/haslayout/tests/float4.html
(Pour n'en citer que quelques uns).

Bon courage.
Modifié par mpop (23 Oct 2006 - 19:08)