28172 sujets

CSS et mise en forme, CSS3

Bonjour,
J'ai un problème d'affichage avec IE6 et IE7 (étonnant, non ?! Smiley cligne )

Pour identifier le problème, j'ai créé une page de test : http://www.jeanmoulin-thouars.fr/paijm/_tests/index.php

En résumé, j'ai deux div, une en float left (bleu) et l'autre en float right (jaune)
Le texte en dessous devrait s'afficher de la façon suivante :
upload/26463-bugIE71.png

Mais avec IE6 et IE7, le texte de la première ligne est décalé à cause des div en float :
upload/26463-bugIE72.png

Une idée pour que cette ligne ne soit pas décalée ??

Merci d'avance ! Smiley biggrin
Bonjour,
Il faut ajouter
float:left;
dans h1,
et enlève
padding-top:200px;
dans la meme balise.
dawdy a écrit :
Bonjour,
Il faut ajouter
float:left;
dans h1

Un clear:both serait plus indiqué.

En passant, je suppose que la quantité de contenu dans le H1 est juste un test? Parce que si tu as des H1 aussi longs, il y a un problème...
Pour être plus précis, voila le problème sur le vrai site :

Sur la page d'accueil, la disposition des éléments est la suivante :
upload/26463-pai1.png
L'image de droite a un float left, et "Plateforme d'assistance ..." est en h1

Lorsque l'utilisateur s'identifie, son nom apparait en haut à droite dans une div en float right, et le titre ne bouge pas ! (d'où le padding-top:200px dans mon 1er exemple)
upload/26463-pai2.png

Dans FF, chrome et IE8, pas de problème, mais dans IE6 ou 7, le titre est décalé par l'apparition de la div en float right :
upload/26463-pai3.png

C'est ce décalage disgracieux que je veux supprimer sous IE7 ou IE6, sans modifier la structure, puisque l'affichage dans les autres navigateurs est correct.
Autant j'aurais une piste pour ce que tu montres de ta page d'accueil (titre ayant le HasLayout, et étant donc repoussé par le flottant)... autant pour ton exemple donné précédemment je ne m'explique pas bien le phénomène.

Une solution détournée serait de positionner les informations d'identification en absolu.
Dans ce genre de bug, je te conseille de mettre des bordures à tes éléments problématiques. Ça aide souvent à comprendre ce qui se passe et par conséquent mieux résoudre le problème.

Si tu peux prendre des captures d'écran avec des bordures rouges / bleu / verts et/ou couleurs voyantes, ça serait bien.

Si tu as un URL de ton vrai site aussi, ça aiderait Smiley smile