Marges sur IE

[Gribouille26]

Bonjour,

J'ai un pb avec mon header. Sur IE, il y a une marge en bas et sur la droite! Tout va bien sur Mozilla...

Je sais pas trop comment expliquer alors voilà ma page en question

Et le bout de css qui va avec:

body { 
padding:0; 
font-size: 0.8em; 
margin: 5% 3% 0 3%; 
font-family: Arial, Helvetica, sans-serif; 
text-align:center; 
} 
#conteneur { 
border: black 2px solid; 
margin:0 auto; 
width: 94%; 
background-color: #e6e7d5; 
text-align:left;
} 
#header { 
background-image: url(images/fine.jpg); 
background-repeat: repeat-x; 
height: 111px; 
} 
.header01 { 
width: 192px; 
background-position: left; 
background-image: url(images/plage.jpg); 
background-repeat: no-repeat; 
} 
#gauche { 
left: 0px; 
width: 140px; 
float:left; 
} 
#centre { 
border: black 2px solid; 
border-right-width:0;
border-bottom-width:0;
margin-left:150px; 
background-color: #acd8f5; 
padding:10;
}

J'ai essayé en mettant des margin:0 un peu partout, sans aucun résultat!

Aurriez-vous une idée pour m'aider?

Merci

[petit-ourson]

Parfois ca m'arrive a cause de passage à la ligne dans la source. Va savoir pourquoi ;o)

Le border left de ta classe centre, si tu le vire tu n'auras plus de probleme a droite. Avec un <img class=header01 src=&quot;http://gribouille26.free.fr/images/plage.jpg" style="display:block">, ton probleme est résolu pour le bas.

C'est pas un problème de rendu quirk, du fait que tu n'utilises pas de doctype ?

Modifié 27 Septembre 2004 par petit-ourson

[LaurentDenis]

Ceci devrait faire l'affaire:

body { 
padding: 0; 
font-size: 0.8em; 
margin: 5% 6% 0 6%; 
font-family: Arial, Helvetica, sans-serif; 
} 
#conteneur { 
border: black 2px solid; 
background-color: #e6e7d5;
} 
#header { 
background-image: url(fine0000.jpg); 
background-repeat: repeat-x;
}
#header img {
vertical-align: bottom;
} 
#gauche { 
width: 140px; 
float:left; 
} 
#centre { 
border: black 2px solid; 
border-right-width:0;
border-bottom-width:0;
margin-left:140px; 
background-color: #acd8f5; 
} 
h1 {
font-size: 1.5em;
font-weight: bold;
text-align:center;
margin-top: 0;
padding-top: 1em;
}

<div id="conteneur">

<div id="header">
	<img src="plage000.jpg" class="header01" alt="">
</div>

<div id="gauche">

- la marge de droite en trop dans IE5.5-60 est due au box-model IE et à la largeur 94% inutile sur #conteneur --> supprimée, les marges du body étant augmentée en conséquences.

- la marge inférieure en trop dans IE5.5-6.0 est due à l'alignement du bas de l'image du header sur la "baseline" du texte de #header : il reste un espace de quelques pixels en dessous où s'affichent les jambages inférieures des lettres --> spécifier un vertical-align: bottom pour cette image.

- IE5.0 gère mal la marge supérieure du h1 et crée un autre espace vide entre #header et #centre: remplacer cette marge par un padding-top.

- IE5.0 encore a du mal avec la marge gauche de #centre : la réduire de 150 à 140px.

- au passage, ajout d'un alt="" pour l'image (accessibilité), et suppression du "left: 0px;" dénué de sens dans #gauche (c'est un flottant, il n'a pas de propriété left).

Modifié 28 Septembre 2004 par LaurentDenis

[Gribouille26]

Merci LaurentDenis!

Je vais aller tester ça.

Mais avant, si j'ose te demander....

- IE5.0 encore a du mal avec la marge gauche de #centre : la réduire de 150 à 140px.

<{POST_SNAPBACK}>

J'ai pas compris pourquoi le pb avec cette marge?

Tu avais super bien expliqué tout le reste...

[édit] mince, ça m'a déplacé mon pied de page! Je m'en vais essayé de le remettre en place... [/édit]

Modifié 28 Septembre 2004 par Gribouille26

[Gribouille26]

Ca me fait un bug vraiment étrange sur IE!

Entre la plage et le menu j'ai une barre noir qui apparaît. Pas à tout les coups, mais si vous descendez et remonter dans la page, elle apparaît et disparaît quand vous revenez sur la partie de la page où elle se trouve....

C'est bizarre...

J'ai essayé de rajouter un border:0 à la partie menu de gauche, mais ça ne change rien.

Pas de pb sur Mozilla.

Si quelqu'un à une idée, je suis prenneuse.

Mais c'est pas vital pour le site, enfin je crois...