Incompatibilité avec Internet Explorer

Fermé
davidtfx Messages postés 36 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 4 juillet 2009 - 4 juil. 2009 à 00:28
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 - 4 juil. 2009 à 03:38
Bonjour,

je viens de réaliser un site web; et il ne fonctionne pas sous IE mais que sous firefox, les longueurs de mon body de CSS ne sont pas respecté, et les menus déroulant ne fonctionne pas.

Voici mon code html:

<html>
<head>
<title>XXX</title>
<link rel="stylesheet" type="text/css" title="news" href="design.css" />
</head>
<body>
<div id="en_tete">
</div>
<div id="conteneur-menu">

<div id="menu">
<dl>
<dt><a href="index.html">Menu 1</dt></a>
</dl>
<dl>
<dt>Menu 2</dt>
<dd>
<ul>
<li><a href="XXX">Sous Menu_1</a></li>
</ul>
</dd>
</dl>
<dl>
<dt>Menu 3</dt>
<dd>
<ul>
<li><a href="XXX">Sous Menu_1</a></li>
<li><a href="XXX">Sous Menu_2</a></li>
</ul>
</dd>
</dl>
<dl>
<dt>Menu 4</dt>
<dd>
<ul>
<li><a href="XXX">Sous Menu_1</a></li>
<li><a href="XXX">Sous Menu_2</a></li>
<li><a href="XXX">Sous Menu_3</a></li>
<li><a href="XXX">Sous Menu_4</a></li>
</ul>
</dd>
</dl>
</div>
</div>
<div id="corps">
CE QUE JE VEUX
</div>
</body>
</html>

et mon code css:

body
{
margin: 0 auto;
padding: 0;
width: 800px;
margin-top: 20px;
}
a
{
text-decoration: none;
color: #FFD700;
}
#en_tete
{
width: 800px;
height: 180px;
background-image: url("images/galactic.jpg");
background-position: center;
background-repeat: no-repeat;
margin-top: 10px;
margin-bottom: 5px;
border-color: #FFD700;
}
#conteneur-menu
{
width: 800px;
margin: 0 auto;

background-color:#0000FF;
height:100px;
position:relative;
margin-bottom:20px;
background-color: #6495ED;
text-align: center;
color: #FFFFFF;
border: 0px solid black;
border-color: #FFD700;
}
#menu
{
position:absolute;
}

dl
{
height:40px;
margin:0;
padding:0;
display:block;
float:left;
}
dt
{
width:199px;
display:block;
height:40px;
color:#FFD700;
line-height:40px;
text-align:center;
border-right:1px #FFD700;
background-color: #0000FF;
cursor:pointer;
}
dd{
display:block;
margin:0;padding:0;
background-color: #B8860B;

}
dd ul
{
margin:0;padding:0;
text-align:center;
list-style:none;
}
dd ul li
{
display:block;
margin:0;padding:0;
}
dd ul li a
{
color:#FFF;
display:block;
text-decoration:none;
width:200px;
height:30px;
line-height:30px;
border-top:dotted 1px #FFD700;
border-bottom:dotted 1px #FFD700;
}
dd ul li a:hover
{
background-color:#B8860B;
color:#FFD700;
}

dl dd
{
display:none;
}
dl:hover dd
{
display:block;
}
#corps
{
height: 800x;
margin-left: 0px;
margin-top:2px;
margin-bottom:4px;
padding:20px;
background-color:#00BFFF;

}
.element_palmares
{
color: #FFF;
}
.element_liens a
{
color: #000000;
}

Ou est donc le probleme de l'incompatibilité ?

Merci

David
A voir également:

1 réponse

monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 128
4 juil. 2009 à 03:38
Bonsoir,

je ne sais pas si cela va régler ton problème mais tu définis 2 fois ta marge top dans ton css > body

margin:0 auto; et margin-top: 20px; (voir http://www.pompage.net/traduction/raccourcisCSS )

sinon je te conseil de rajouter dans ton css > body : height:100%;

0