28173 sujets

CSS et mise en forme, CSS3

Pb affichage de menu déroulant avec IE7, Ok avec FF !

Bonjour à tous ! Je suis novice en la matière et je rencontre un problème qui me pose bien des soucis : j'ai crée un menu déroulant qui fonctionne parfaitement avec Firefox mais qui se décale avec IE7. Pouvez vous me dire où se trouve l'erreur ! D'avance merci pour votre aide !

code html :

<body>
<div id="conteneur">
<div id="header">
<h1>Dj TOTO</h1>
<h2>Spécialiste de l'évènement </h2>
<br>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href=" " title="Retour à l'accueil">Accueil</a></dt>
</dl>

<dl>
<dt onmouseover="javascript:montre();"><a href=" " title="Devis en ligne">Devis en ligne</a></dt>
</dl>

<dl>
<dt onmouseover="javascript:montre();"><a href=" " title="Gallerie photos">Photos</a></dt>
</dl>

<dl>
<dt onmouseover="javascript:montre();"><a href=" " title="Gallerie vidéo">Vidéos</a></dt>
</dl>

<dl>
<dt onmouseover="javascript:montre();"><a href=" " title="Mes musiques">Styles musicaux</a></dt>
</dl>
</div>
</div>

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>


<div align="center">
<table width="600" border="0">
<br>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center">VOTRE DEMANDE DE DEVIS A BIEN &Eacute;T&Eacute; TRANSMISE !</p>
<p align="center">Un email de confirmation vient de vous être adressé.</p>
<p>&nbsp;</p>
<p align="center">Je ne manquerai pas d'y porter la plus grande attention.</p>
<p align="center">Pour une r&eacute;ponse instantan&eacute;e, veuillez composer le</p>

</FONT></p>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


<p align="center" class="pied"><div align="center"><font color="#000000" size="1" face="Arial, Helvetica, sans-serif">DJ TOTO - Sp&eacute;cialiste de l'&eacute;v&egrave;nement <a href="mailto:toto@live.fr">Contact</a>
- Copyright © 2008 Tous droits r&eacute;serv&eacute;s</font></div></p>

</div>
</body>



ET VOICI LE CSS

body {
font-family:Verdana;
font-size: 0.8em;
margin: 0;
background:#cccccc}

#header {
background-color: white;
background-image: url(/photosite/djtaharplatine.gif);
background-repeat: no-repeat;
background-position: left top;
text-align:right;
height:243px;
}

#conteneur {
position: absolute;
width: 60em;
left: 50%;
margin-left: -30em;
background-color:#FFCC00;
padding:0 1em 0 1em;}

<!--
body {
margin: 0;
padding: 0;
background: black;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: auto;
left: auto;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
-->

#centre {margin-right: 150px;padding:0.2em;}
#droite {
padding:0.2em;
position: absolute;
right:0;
width: 150px;

}
#pied {height: 30px;}

#header h1 {margin-top:20px;font-size:200%;}


p {margin: 0 2px 10px;}
.titre {
padding-top:10px;
font-size: 150%;
font-weight: bold;
text-align: right;
}
.soustitre {
text-align: right;
}
.fil {
margin:0.2em 0.2em 0.2em 0;
padding:0;
font-size: 80%;
color: #666666;
}
h1 {
font-size: 120%;
font-variant: small-caps;
margin:0.4em 0 0.2em 0;
}

h2 {
font-size: 110%;
margin:0.4em 0 0.2em 0;
}
h3 {font-size: 100%;
padding-left:1em;
font-weight: bold;
letter-spacing: 0.1em;
}

#centre ul {
list-style-type: Aucune;

}
#centre li {
margin:0.1em 0 0.4em;
list-style-position: inside;
list-style-type: circle;
}

input,textarea {
border: 1px solid #CCCCCC;
}
.section {
background-color: #CCCCCC;
width: 100%;
font-size: 120%;
text-align: center;
margin: 2px;
font-weight: bold;
}
.bouton {
border: 1px solid #FF0000;
}
.case {
border: 0;
}
.pied {
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #999999;
border-bottom-color: #999999;
padding-top: 3px;
font-size:80%;
padding-bottom: 3px;

}
Modifié par imaziren (08 Feb 2008 - 02:00)
Sujet clos
Aller à