IE 6-7 n'obéissent pas padding/marge

Question

I mon pied de page j'ai 3 colonnes avec le remplissage: 10px 20px 0px;

Dans ceux-ci j'ai quelques titres (h1/h2) avec margin-top: 10px;

Cela semble correct dans tous les navigateurs sauf de IE 6 et 7

Dans IE 6 et 7 les titres sont placés 10px du haut du récipient. (le rembourrage supérieur est manquant, mais le rembourrage gauche/droite est ok)

Quelqu'un peut-il me dire pourquoi?

http://www.hr-relocation.com/test.html

.footercolumn { 
    width: 260px; 
    height: 170px; 
    padding: 10px 20px 0px; 
    text-align: left; 
    overflow: hidden; 
    background: url(../gfx/footerbg.gif) no-repeat top left; 
    float: left; 
} 

.footercolumn h1, .footercolumn h2, .footercolumn h3 { 
    margin-top: 10px; 
    font-size: 12px; 
    line-height: 1.2em; 
    font-weight: bold; 
    color: #c5037b; 
    display: block; 
} 

Answer 1

Bienvenue sur le développement web - Commentaire de Rob est tout à fait vrai, les gens qui utilisent IE 6 & 7 ne doivent pas être autorisés sur Internet. Vous pouvez aller Here pour voir une explication détaillée des bogues IE.

Avant d'aller déchirer votre style, permettez-moi de suggérer quelque chose: Conditional Stylesheets

Vous appliquez quelque chose comme ceci dans votre section HTML HEAD:

<!--[if IE 7]> 
    <link rel="stylesheet" type="text/css" href="ie7.css"> 
<![endif]--> 

Cela vous permet de cibler IE avec CSS supplémentaires . Lisez le lien, car il devient plus affiné - et est la voie de choix pour les problèmes que vous rencontrez. Le plus simple est de s'assurer que le lien vers votre css IE-only vient après vos autres styles, et ne contient généralement que les corrections (à moins que cela ne fonctionne pas, puis redéfinir l'élément). Par exemple, si vous avez div « .header » qui est entièrement définie dans votre fichier CSS normal, mais il est montrant 10px à gauche dans IE, votre IE stylesheet conditionnel contiendrait:

.header{ 
margin-left: 10px; 
} 

qui serait ajouté au CSS existant et corrigerait votre problème ..

Bonne chance ..

Answer 2

cinqoTimo a une excellente réponse à ce problème.

Une autre façon dont j'ai travaillé autour de cela est d'avoir toutes mes marges sur le fond de mes conteneurs.

je remarquai que si un divs eu/conteneurs au sommet de l'autre (le récipient au-dessus avec une marge inférieure de 1em, le récipient ci-dessous avec une marge supérieure de 1em, les deux conteneurs étaient le même style, à savoir:

#imageDiv { 
margin:1em; 
} 

) alors IE7 donnerait seulement 1 marge à un conteneur. Donc, au lieu d'un écart de 2em entre les conteneurs haut et bas, il y aurait un écart de 1em.

Alors après, j'ai décidé d'essayer et juste affecter les marges inférieures aux conteneurs, images, etc. Par exemple:

#imageDiv { 
margin-top:0em; 
margin-right:1em auto; 
margin-bottom:2em; 
margin-left:1em auto; 
} 

Si vous avez besoin d'espace vide au-dessus de votre conteneur très haut, car il n'y aura pas de d'autres conteneurs au-dessus, il devrait être bon d'y assigner une taille de marge supérieure, ou d'ajouter un rembourrage sur le corps, c.-à-d.,

body { 
padding-top:1em; 
} 

Answer 3

Si vous évitera de spécifier la hauteur ou la largeur sur tout élément que vous spécifiez les frontières et le rembourrage, vous éviterez des problèmes avec des incohérences dans la boîte des navigateurs implémentations de modèle. Beaucoup de maux de tête de disposition disparaîtront si vous pratiquez ceci.

Pour plus d'informations, voir Internet Explorer Box Model Bug.

Answer 4

Merci pour alle les réponses et Sugestion ...

Travailler dur toute la nuit je suis venu avec une solution qui workd pour tous les IE :-)

l'ajout d'un <div class="clearall"></div> en haut de la div conteneur avec ce css a résolu le problème

clear: { both !important; display: block !important; height: 0 !important; margin: 0 !important; overflow: hidden !important; padding: 0 !important; width: 0 !important; }