Webmaster Hub > Marges sur IE

Version complète: sur le forum Webmaster Hub : Marges sur IE

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

Gribouille26

lundi 27 septembre 2004 à 18:42

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:

CODE

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

lundi 27 septembre 2004 à 21:38

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="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 ?

LaurentDenis

mardi 28 septembre 2004 à 04:50

Ceci devrait faire l'affaire:

CODE

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).

Gribouille26

mardi 28 septembre 2004 à 10:32

Merci LaurentDenis!

Je vais aller tester ça.

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

CITATION(LaurentDenis @ 28 Sep 2004, 05:50)

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

J'ai pas compris pourquoi le pb avec cette marge?
Tu avais super bien expliqué tout le reste... :up:

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

[/édit]

Gribouille26

mardi 28 septembre 2004 à 11:19

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...

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.