ZONE CSS
Information accessibilité
Détail du bug css de la css : margin
Explication de la gestion des bugs css
Définition
Vous trouverez ci-dessous divers bugs d'interprétation de la css margin.
Ces bugs ont été transmis par les internautes du site.
J'ai vérifié certains bugs mais pour la plupart de bugs css "non vérifiés", ils sont soit sur des navigateurs MAC soit sur un navigateur que je ne possède pas.
Ceux que j'ai pu visualiser sont notés
Bug vérifié : oui
Bug n°1
Bug mis par Dmc
Système d'exploitation : windows xp
Navigateur : Internet Explorer 6
Bug vérifié : oui
Problème avec margin:
Sous Internet Explorer 6 et 7 la marge haute (margin-top) du premier paragraphe (p) et la marge basse (margin-bottom) du dernier paragraphe (p) ne fonctionnent pas quand le parent est en float right ou left.
Code CSS :
width:200px;
border:1px solid red;
}
p{
background-color:#FFCC00;
}
Code HTML :
<p> Je n'ai pas de marge haute sous IE</p>
<p>Je n'ai pas de marge basse sous IE</p>
</div>
Résultat :
Pour régler le problème deux possibilités.
Spécifier explicitement la marge haute (margin-top) et basse (margin-bottom) :
background-color:#FFCC00;
margin-top: 20px;
margin-bottom:20px;
}
Ou ajouter un hack pour Internet Explorer :
margin:auto;
}
*+html #contenu p{
margin:auto;
}
Ce phénomène est visible sur toutes les balises avec marge par défaut comme les balises h1, h2...
Navigateur : Internet Explorer 6
Bug vérifié : oui
Problème avec margin:
Sous Internet Explorer 6 et 7 la marge haute (margin-top) du premier paragraphe (p) et la marge basse (margin-bottom) du dernier paragraphe (p) ne fonctionnent pas quand le parent est en float right ou left.
Code CSS :
Exemple de code :
#contenu{width:200px;
border:1px solid red;
}
p{
background-color:#FFCC00;
}
Code HTML :
Exemple de code :
<div id="contenu"><p> Je n'ai pas de marge haute sous IE</p>
<p>Je n'ai pas de marge basse sous IE</p>
</div>
Résultat :
Solution du problème par DMC :
Pour régler le problème deux possibilités.
Spécifier explicitement la marge haute (margin-top) et basse (margin-bottom) :
Exemple de code :
p{background-color:#FFCC00;
margin-top: 20px;
margin-bottom:20px;
}
Ou ajouter un hack pour Internet Explorer :
Exemple de code :
* html #contenu p{ margin:auto;
}
*+html #contenu p{
margin:auto;
}
Ce phénomène est visible sur toutes les balises avec marge par défaut comme les balises h1, h2...
Bug n°2
Bug mis par Dmc
Système d'exploitation : mozilla/4.0 (compatible; msie 6.0; windows nt 5.1; sv1; fdm)
Navigateur :
Bug vérifié : oui
Problème avec margin:
La suppression des marges sur une balise (x)html HR,ne fonctionne pas sous Internet Explorer.
Quoi que l'on fasse, il reste un espace entre la balise (x)html HR et le contenu qui la précède et qui la suit.
Résultat :
Code css :
padding: 0;
margin: 0;
}
Code (X)HTML :
<hr/>
<div>Second contenu sur Zonecss</div>
Vous devez mettre des marges négatives pour Internet Explorer.
Code css :
hr{display:block;
padding: 0;
margin: 0;
}
* html hr{/*ie6*/
margin: -0.5em 0;
}
*+html hr{ /*ie7*/
margin: -0.5em 0;
}
Navigateur :
Bug vérifié : oui
Problème avec margin:
La suppression des marges sur une balise (x)html HR,ne fonctionne pas sous Internet Explorer.
Quoi que l'on fasse, il reste un espace entre la balise (x)html HR et le contenu qui la précède et qui la suit.
Résultat :
Code css :
Exemple de code :
hr{display:block;padding: 0;
margin: 0;
}
Code (X)HTML :
Exemple de code :
<div>Premier contenu sur Zonecss</div><hr/>
<div>Second contenu sur Zonecss</div>
Solution du problème par DMC :
Vous devez mettre des marges négatives pour Internet Explorer.
Code css :
Exemple de code :
hr{display:block;
padding: 0;
margin: 0;
}
* html hr{/*ie6*/
margin: -0.5em 0;
}
*+html hr{ /*ie7*/
margin: -0.5em 0;
}