28173 sujets

CSS et mise en forme, CSS3

Probleme d'affichage de mon header sous IE

Bonjour à tous!

J'ai un petit probleme d'alignement de mon header uniquement sur internet explorer.
EN effet la partie <ul id="centre"> ne s aligne pas avec les parties gauche et droite alors que sous firefox cela fonctionne correctement.
Quelqu'un aurait il une idée?
Merci d'avance

Voila le code de ma page

<code>

<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link href="css/styles2.css" rel="stylesheet" type="text/css">
</head>

<body>
<center>
<div id="conteneur" >

<!-- header -->

<ul id="menugauche">
<li>
<img src="images/haut.gif" width=165 height=17 border=0 alt="bb">
</li>
<li>
<a href="testdiv.html"><img name="home_page" src="images/home-page.gif" width=165 height=28 border=0 alt="home page"></a>
</li>
<li>
<a href="historique.html"><img name="historique" src="images/historique.gif" width=165 height=24 border=0 alt="Historique"></a>
</li>
<li>
<a href="#"><img name="services" src="images/services.gif" width=165 height=24 border=0 alt="services"></a>
</li>
<li>
<a href="#"><img name="products" src="images/products.gif" width=165 height=24 border=0 alt="products"></a>
</li>
<li>
<a href="#"><img name="support" src="images/support.gif" width=165 height=24 border=0 alt="support"></a>
</li>
<li>
<a href="#"><img name="news" src="images/news.gif" width=165 height=24 border=0 alt="news"></a>
</li>
<li>
<a href="#"><img name="contacts" src="images/contacts.gif" width=165 height=24 border=0 alt="contacts"></a>
</li>
<li>
<img name="m3" src="images/m3.gif" width=165 height=83 border=0 alt="">
</li>
</ul>


<div id="droite">
<img src="images/main2.gif" width=246 height=272 alt="">
</div>

<ul id="centre">
<li>
<img src="images/main1.gif" width=336 height=204 alt="">
</li>

<li id="textehaut">
<span class="text7">blablablabal</span>
</li>

</ul>

<!-- fin header -->

<!-- le coprs -->

<div id="corps">
<p>blablablabla</p>
</div>

<!-- fin du corps -->

<!-- footer -->
<ul id="pied">
<li class="text6">
copyright 2006 &copy;
</li>
<li class="text6">
<a href="#">accueil</a> | <a href="#">plan du site</a> | <a href="#">mentions légales</a> | <a href="#">contact</a> | <a href="#">news</a>
</li>
</ul>

<!-- fin footer -->

</div>
</center>
</body>

</html>



et voici ma css


body {
font-family: Verdana;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #525252;
padding: 0;
margin:0 ;

}

#conteneur {
width: 747px;
border: 1px solid black ;
}


#centre {
margin-left: 165px;
margin-right: 246px;
margin-top: 0px;
margin-bottom:10px;
padding: 0px;
border: 0px;
}


#centre li {
list-style-type: none;
}


#corps {

}


#textehaut {
width: 336px;
height: 68px;
font-family: tahoma;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
background-image:url("../images/main3.gif");
}


#basheader {
margin-left: 165px;
padding: 0px;
border-width: 0px;
}


#gauche {
width:146px;

}

#droite {

float:right;
margin: 0px;
padding: 0px;
border-width: 0px;
display: inline;
}



#menugauche {
list-style-type: none;
margin-top: 5px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
float:left;
width: 165px;
border-width: 0px;
line-height: 0;
padding:0;
}


#menugauche li {
margin:0;
padding:0;
border:0;
display: inline;

}

#menugauche a {
color: #000000;
margin: 0px;
padding: 0px;
}

#menugauche a:hover {
text-decoration: none;
}

#menugauche img {
display: block;
}

#centre img {
display: block;
}


.text6 {
font-family: tahoma;
font-size: 10px;
color: #000000;
font-weight: bold;
}

</code>
pas d' idée ?

désolé je vais mettre le code dans les bonnes couleurs du forum.


<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link href="css/styles2.css" rel="stylesheet" type="text/css">
</head>

<body>
<center>
<div id="conteneur" >

<!-- header -->

<ul id="menugauche">
<li>
<img src="images/haut.gif" width=165 height=17 border=0 alt="bb">
</li>
<li>
<a href="testdiv.html"><img name="home_page" src="images/home-page.gif" width=165 height=28 border=0 alt="home page"></a>
</li>
<li>
<a href="historique.html"><img name="historique" src="images/historique.gif" width=165 height=24 border=0 alt="Historique"></a>
</li>
<li>
<a href="#"><img name="services" src="images/services.gif" width=165 height=24 border=0 alt="services"></a>
</li>
<li>
<a href="#"><img name="products" src="images/products.gif" width=165 height=24 border=0 alt="products"></a>
</li>
<li>
<a href="#"><img name="support" src="images/support.gif" width=165 height=24 border=0 alt="support"></a>
</li>
<li>
<a href="#"><img name="news" src="images/news.gif" width=165 height=24 border=0 alt="news"></a>
</li>
<li>
<a href="#"><img name="contacts" src="images/contacts.gif" width=165 height=24 border=0 alt="contacts"></a>
</li>
<li>
<img name="m3" src="images/m3.gif" width=165 height=83 border=0 alt="">
</li>
</ul>


<div id="droite">
<img src="images/main2.gif" width=246 height=272 alt="">
</div>

<ul id="centre">
<li>
<img src="images/main1.gif" width=336 height=204 alt="">
</li>

<li id="textehaut">
<span class="text7">blablablabal</span>
</li>

</ul>

<!-- fin header -->

<!-- le coprs -->

<div id="corps">
<p>blablablabla</p>
</div>

<!-- fin du corps -->

<!-- footer -->
<ul id="pied">
<li class="text6">
copyright 2006 &copy;
</li>
<li class="text6">
<a href="#">accueil</a> | <a href="#">plan du site</a> | <a href="#">mentions légales</a> | <a href="#">contact</a> | <a href="#">news</a>
</li>
</ul>

<!-- fin footer -->

</div>
</center>
</body>

</html>



et la css


body {
font-family: Verdana;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #525252;
padding: 0;
margin:0 ;

}

#conteneur {
width: 747px;
border: 1px solid black ;
}


#centre {
margin-left: 165px;
margin-right: 246px;
margin-top: 0px;
margin-bottom:10px;
padding: 0px;
border: 0px;
}


#centre li {
list-style-type: none;
}


#corps {

}


#textehaut {
width: 336px;
height: 68px;
font-family: tahoma;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
background-image:url("../images/main3.gif");
}


#basheader {
margin-left: 165px;
padding: 0px;
border-width: 0px;
}


#gauche {
width:146px;

}

#droite {

float:right;
margin: 0px;
padding: 0px;
border-width: 0px;
display: inline;
}



#menugauche {
list-style-type: none;
margin-top: 5px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
float:left;
width: 165px;
border-width: 0px;
line-height: 0;
padding:0;
}


#menugauche li {
margin:0;
padding:0;
border:0;
display: inline;

}

#menugauche a {
color: #000000;
margin: 0px;
padding: 0px;
}

#menugauche a:hover {
text-decoration: none;
}

#menugauche img {
display: block;
}

#centre img {
display: block;
}


.text6 {
font-family: tahoma;
font-size: 10px;
color: #000000;
font-weight: bold;
}
Administrateur
Salut,

Tu aurais pu te contenter d'éditer ton premier message plutôt que d'en créer un nouveau Smiley cligne
Salut,

Je ne sais pas ce que tu appelles les parties gauche et droite, mais je viens de passer pas mal de temps à résoudre un probleme (apparemment similaire) d'alignement de liste dans I.E. (alors que tout se passait bien sous firefox)

En fait, il faut jongler avec les parametres margin et padding. Si je ne me trompe pas, les padding influencent le placement sous firefox, alors que les margin influent sur la position dans I.E. (ou le contraire, je ne sais plus bien, à chaud comme ça, j'ai testé pas mal de solutions avant d'y arriver). Pour finir, ça me donne un code comme ça :


#menu ul {
	margin-left:20px;
	padding-left:15px;
}

#menu li {
	list-style-type: circle ;
	margin-left:0px;
}


qui me permet d'avoir des alignements corrects dans les deux navigateurs.

En esperant que cette piste t'aide à résoudre ton probleme
Bon courage
Modifié par zeltron (17 Mar 2006 - 17:18)
Désolé si je ne réponds pas vraiment à la question, mais je ne peux pas laisser passer ça :
zeltron a écrit :
Si je ne me trompe pas, les padding influencent le placement sous firefox, alors que les margin influent sur la position dans I.E. (ou le contraire, je ne sais plus bien, à chaud comme ça, j'ai testé pas mal de solutions avant d'y arriver).

C'est totalement faux et susceptible de contribuer à l'incompréhension chez les débutants en css....

Les "margin" jouent sur l'espacement extérieur au bloc concerné, alors que les "padding" jouent sur l'espacement intérieur, et cela dans tous les navigateurs.
Sujet clos
Aller à