Discussion :

[yann4dev]

Bonjour à tous,
J'essaie de résoudre un petit problème de compatibilité CSS avec internet explorer.
Voici le code:

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

h1.cby { text-align: center; font-size: 22px; }

HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<h1 class="cby">&nbsp;&nbsp;<a href="#">MON TITRE</a></h1>

Le problème est que sur internet explorer (tester sur le 8), le titre n'est pas centré, et se retrouve à droite.
Merci de m'éclairer sur la question.

Vous pouvez retrouver le code dans son contexte dans la page suivante:
http://by.cmsc.pagesperso-orange.fr/sc-by.html

[NoSmoking]

Bonjour,
effectivement bizarre, en supprimant le font-size: 22px; de ton H1, le texte se centre....cela serait à disséquer!

[Candygirl]

Edit:peut-être faux, je vérifie un truc ^^


Hello,

C'est à cause des espaces insécables dans ton code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<h1 class="cby">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://supercollider.sourceforge.net/">SuperCollider</a></h1>

Comme IE8 et IE9 gèrent différemment la taille des caractères (sur IE9 ils occupent en général un poil plus de largeur /hauteur) tu te retrouves avec une différence de rendu.

Sur IE8, il a la place de mettre les espaces+ le titre sur une seule ligne (comme sur FF d'ailleurs) et donc il centre toute la chaîne espaces+texte et tu as l'impression que c'est aligné à droite vu que ça fait pile la largeur à disposition.

Sur IE9, les espace + le texte = trop large pour une ligne => le texte passe à la ligne et donc le centrage s'opère sur les deux lignes.

En faite, le principe de mon explication d'interprétation entre IE8 et IE9 à peu près correcte sauf que c'est un peu plus pervers puisque le h1 vient se positionner à côté du menu flottant. Un clear sur le #texte par contre permet d'éviter le problème.

EDIT2:

Elle sert à quoi ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<p>
<img src="sc-by_fichiers/1x1px.gif" alt="" height="10"> 
</p>

C'est visiblement le positionnement de cette image qui diffère d'un navigateur à l'autre et provoque le passage à la ligne du h1 ou non entre IE8 et IE9. Sur IE8, texte moins large = l'image vient à côté de contact et donc du coup il y a la place pour le titre à droite du BY, Sur IE), pas la place après contact = elle vient à côté du BY et du coup le titre passe au-dessous.

CQFD

[NoSmoking]

il s'agit effectivement d'un problème, positionnement dans le flux, la place occupé par l'image BY déborde sur l'emplacement du H1, du fait que le UL n'a pas de hauteur suffisante, pas de déclaration de height.

Pour supprimer ce problème, mettre une height au LI, ou lui affecter un overflow:hidden, ce qui repoussera la DIV conteneur du H1 plus bas.

[Candygirl]

Perso je préférerais l'utilisation du clear sur l’élément qui suit (#text) plutôt qu'un overflow:hidden ou encore un height. (Et la suppression du paragraphe avec l'image inutile).

Le clear est quand même la propriété de base pour gérer le contrôle du flux autour des flottants et est tout à fait utilisable dans ce cas.

Le détournement de l'overflow à des fins de création de contexte de formatage est envisageable lorsqu'on n'a aucun élément auquel appliquer un clear mais doit être utilisé avec discernement, surtout avec la valeur hidden, pour des raisons d’accessibilités (disparition de contenu dans certains cas de figure).

[NoSmoking]

Le clear est quand même la propriété de base pour gérer le contrôle du flux autour des flottants et est tout à fait utilisable dans ce cas.

Effectivement, après observation plus attentive du code, la propriété overflow est à proscrire compte tenu du sous menu sur le hover de Works.

Il apparaît également pas mal de float:left et même une position:absolute ce qui fait que un clear:both/left semble la bonne solution si ce n'est de faire le menu/sousmenu plus classiquement mais ce n'est pas le but.

Compte tenu de la page, je mettrais le clear sur la <div id="text">.

[yann4dev]

Merci à NoSmoking et Candygirl pour avoir résolu ce petit problème.
J'ai tout simplement ajouter clear:both; à la div #text . (tester sur IE8)