28172 sujets

CSS et mise en forme, CSS3

[résolu] Padding+Margin+Position relative -> Bug IE6 et IE7 mais pa

Bonjour,
J'ai découvert un bug très étrange sur IE6 et IE7 mais pas IE5, Firefox, Opera, Safari...
Le margin-left:100px ne marche pas sur IE6 et 7.
Je précise que mon site est valide CSS/XHTML strict.

Je vous montre un exemple simplifié:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>wtf</title>
</head>
<div style="position:relative;width:492px;margin:0 auto;text-align:left;background-color:red;">
    <div style="position:relative;padding:12px 24px 0 24px;background-color:black;">
          <div style="position:relative;height:93px;width:399px;margin-left:100px;background-color:pink">
          </div>
    </div>
</div>
</body></html>


Quelqu'un connait la cause du problème ?
Merci d'avance. upload/19917-bug.JPG
Modifié par energy13 (02 Mar 2009 - 13:19)
Il y a deux problèmes :
- il y a un bug de IE6 (et apparemment de IE7) que je n'ai jamais vu dans la longue liste de bugs de ces navigateurs : quand un bloc est inclus immédiatement après une balise div, il arrive fréquemment que les marges du bloc inclus ne soient pas respectées (je ne sais pas s'il s'agit d'une extension du concept de fusion des marges). Pour résoudre ce bug il suffit d'introduire un commentaire entre les deux balises d'ouverture des blocs :
<div id="1" >
<!-- fais chier IE -->
<div id="2">
etc...
- les dimensions de vos boites sont incorrectes : la somme des marges+padding+width excède la largeur de votre conteneur; dans ce genre de situations IE élargi le conteneur et Firefox tronque le contenu.
Merci pour votre réponse Smiley cligne
Les dimensions étaient un exemple donc même avec des dimensions juste, ça bug.
Et j'ai trouvé une solution plus propre : ajouter un width à chaque div Smiley smile
Sujet clos
Aller à