[Résolu] Prob sous IE 6, décalage...

Slt à tous,
Eh ouaip encore lui vous allez dire ^^ finallement, je devrai peut-être laisser tomber le CSS loool

En fait, tout découle du fait que je ne veux pas utiliser un double <br> pour aller/passer à la ligne...

Je fais ca avec un padding-top de 5 px... Et dans le cas présent, ça se complique avec l'image en float...

La page que vous connaissez tous lol
Ma feuille de style

Je suis sûr que c'est pas grand chose, mais je ne vois pas... la dernière fois que j'ai eu ce problème, je n'ai pas passé de ligne... mais cette fois...
Modifié par Bab (04 Jul 2007 - 18:24)

Hello,

Bab a écrit :
Et dans le cas présent, ça se complique avec l'image en float...

Quel est le problème exactement ?
Le décalage entre les deux div via le padding-top:5px se fait correctement, à priori.

On pourrait faire mieux en virant le padding (pas vraiment fait pour ça...), et en utilisant des marges à la place. Et un peu de padding sur div#centre pour faire bonne mesure. Et un peu de line-height pour que ça respire, et...

#centre {
margin-left:226px;
margin-right:10px;
padding:1px 10px;
line-height:1.6em;
background-color:white;
}
.text {
margin:.5em 0;
color:#2C2C2C;
text-align:justify;
/*width:540px; --> À supprimer */
}

Mais bon, si on veut faire les choses bien on virera ces affreux <div class="text">...</div> et on les remplacera par de magnifiques <p>...</p> (c'est tout de même plus lisible, non ?). De même, on assassinera sauvagement les &nbsp;&nbsp;&nbsp; qui trainent en début de «paragraphe», pour utiliser plutôt un peu de text-indent.
Ce qui nous donnera, côté CSS :

div#centre p {
margin:.5em 0;
text-indent: 15px;
color:#2C2C2C;
text-align:justify;
}

Voilà, ça devrait être plus lisible et moins bricolé.


PS : j'ai poussé le line-height assez haut (à 1.6em). Un 1.3 ou 1.4em peut suffire largement, ou à l'inverse on peut faire quelque chose de très aéré en allant jusqu'à du 1.8em (à partir de 2, ça commence à être gênant pour la lecture).

Et tant qu'on parle du texte, il pourrait être utile de choisir une famille de polices plus complète (au moins en précisant une famille générique), et de ne pas figer la taille du texte en pixels.
Une saine lecture :
http://css.alsacreations.com/Tutoriels-et-articles-divers/gerer-la-taille-du-texte-avec-les-em
Modifié par Florent V. (04 Jul 2007 - 10:48)

Super merci Florent, ca marche impec, enfin y'a tout petit truc sous IE, un décalage de pixels qui sort de je ne sais pas ou ?? On le voit à droite du menu haut... y'a une longueur trop grande dans le div centre je pense, mais je ne l'ai pas trouvée :s ou alors ce sont les em qui agissent différement selon les navigateurs...??

C'est un décallage de trois pixels ? Si c'est le cas, c'est probablement la faute au Three Pixel Jog.

En gros tu as des flottants qui repoussent un élément de ta page de trois pixels vers la droite (à vue de nez, ça se passe au niveau du menu en haut de page). C'est un bug d'IE6. Or, toujours avec IE6, un bloc en width: X ne s'arrêtera pas forcément une largeur de X, mais peut s'élargir si son contenu déborde.

Ça se corrige avec un overflow: hidden sur div#alignement.
Comme ça ne concerne que IE6 (et pas IE7 ou les autres navigateurs), appliquer ce correctif via un commentaire conditionnel pour IE5-6 peut être une bonne idée.

Sinon, je me suis amusé à retoucher très légèrement la mise en forme du texte pour donner plus de respiration. Voir ici (attention, 110 Ko) :

(ne pas tenir compte de la dégradation des couleurs sur l'image...)

Ca marche niquel avec le correctif... merci...

Y'a trop de respiration à mon goût sur ta capture, je trouve ca deja bien aéré avec le line-height : 1.4em ^^

En tout cas merci pour tout

Si ton problème est [Résolu], tu peux le marquer en éditant le titre du premier message de ce sujet : «[Résolu] Titre du sujet».

Quelle tete en l'air j'oublie à chaque fois ^^ encore merci Florent...