Salut à tous,
J'ai eu la mauvaise surprise de découvrir les 2 bugs d'affichage d'Internet Explorer (7) suivants :
1er bug
(bien sûr, à la place des "..." il y a les infos adéquates)
Il s'agit d'une image avec sa légende, affichées à droite d'un paragraphe
xhtml :
css
IE affiche une barre de défilement en bas de la page, ce qui n'a pas lieu d'être a priori... Bon pour le reste ça s'affiche correctement.
2e bug
il s'agit d'une image affichée à gauche d'un paragraphe
xhtml :
css :
ici l'image disparait là ou commence le texte en italique ! c'est un peu gênant !
Solution provisoire
En rajoutant "overflow: hidden;" pour "p" et "dl.right" ce bug disparaît. Mais je me demande si c'est une bonne idée : est-ce que ça fonctionne pour les versions antérieures des navigateurs (j'ai testé avec IE 7, FF, Opéra et Safari sous WVista) ? En plus ça pourrait être la source de nouveaux problèmes, puisque ça marche bien sur les autres navigateurs. Je précise que les codes xhtml et css ont été validés.
Modifié par wismill (14 May 2008 - 23:43)
J'ai eu la mauvaise surprise de découvrir les 2 bugs d'affichage d'Internet Explorer (7) suivants :
1er bug
(bien sûr, à la place des "..." il y a les infos adéquates)
Il s'agit d'une image avec sa légende, affichées à droite d'un paragraphe
xhtml :
<dl class="right">
<dt><img src="..." alt="..." width="150px" height="77px" /></dt>
<dd>...</dd>
</dl>
<p>...</p>
<h2 syle="clear:both;">...</h2>
css
p{margin: 1em 0 0 0;}
dl.right
{
float: right;
margin: 3px 0 3px 12px;
font-style: italic;
text-align: center;
font-size: 0.9em;
}
dl.right dt, dl.right dd {margin: 0;}
IE affiche une barre de défilement en bas de la page, ce qui n'a pas lieu d'être a priori... Bon pour le reste ça s'affiche correctement.
2e bug
il s'agit d'une image affichée à gauche d'un paragraphe
xhtml :
<p>
<img src="img/affiche.jpg" class="leftImg" alt="..." width="200px" height="200px" />
...<em>le texte en italique</em>....
</p>
<p style="clear:both;">...</p>
css :
p{margin: 1em 0 0 0;}
img.leftImg {float: left; margin: 0 12px 9px 0;}
ici l'image disparait là ou commence le texte en italique ! c'est un peu gênant !
Solution provisoire
En rajoutant "overflow: hidden;" pour "p" et "dl.right" ce bug disparaît. Mais je me demande si c'est une bonne idée : est-ce que ça fonctionne pour les versions antérieures des navigateurs (j'ai testé avec IE 7, FF, Opéra et Safari sous WVista) ? En plus ça pourrait être la source de nouveaux problèmes, puisque ça marche bien sur les autres navigateurs. Je précise que les codes xhtml et css ont été validés.
Modifié par wismill (14 May 2008 - 23:43)
) et si la solution "overflow: hidden;" est bonne ou seulement un nouveau bidouillage. Je crois avoir lu que le problème est dû à une mauvaise gestion de l'affichage en italique sous IE et non un problème avec la propriété float. Si je retrouve l'article je vous tiens au courant.