Incompatibilité avec Internet Explorer
davidtfx
Messages postés
38
Statut
Membre
-
monkey_monk Messages postés 681 Statut Membre -
monkey_monk Messages postés 681 Statut Membre -
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
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:
- Incompatibilité avec Internet Explorer
- Internet explorer - Guide
- Internet explorer 11 - Télécharger - Navigateurs
- Internet explorer 8 - Télécharger - Navigateurs
- Internet explorer 10 - Télécharger - Navigateurs
- Explorer patcher - Télécharger - Personnalisation
1 réponse
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%;
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%;
