Bonjour, j'ai un souciavec mon menu déroulant. Ce dernier fonctionne très bien sur firefox, chrome, IE8, IE9 mais le souci est que sur IE7 mon menu est décalé sur la droite de plus de 50px, je ne trouve pas d'où vient le bug.
Voila le header de ma page
</code>
et le css de mon menu
si je met une position relative sur mon #menu li ul, l'affichage dans IE7 est impeccable mais le soucis est que mon image header1.jpg est decalé vers le bas et du coup laisse un affreux espace blanc.
Quelqu'un aurait une idée ?
Merci d'avance[/i][/i]
Voila le header de ma page
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
titre de la page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/mon_css.css" />
<meta name="Keywords" content="mots clés" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div id="conteneur_">
<div id="menuh_">
<div id="menuhint_">
<div class="mail"><a href="mps.php" title="Lire ses messages personnels">1</a></div>
<div class="identifiant">
<a href="user.php?id=6"><strong>pseudo</strong></a>
<a href="deconnexion.php" title="Déconnectez-vous !"> <img title="Déconnectez-vous !" alt="Déconnectez-vous !" src="../images/deconnexion.png"/></a>
<!--[if lt IE 7]>
<script type="text/javascript">
// Fonction destinée à remplacer le "LI:hover" pour IE 6
sfHover = function() {
var sfEls = document.getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover = function() {
this.className = this.className.replace(new RegExp(" sfhover"), "");
this.className += " sfhover";
}
sfEls[i].onmouseout = function() {
this.className = this.className.replace(new RegExp(" sfhover"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
</div>
<div class="compte">
<ul id="menu">
<li>Mon Compte
<ul class="sousMenu">
<li><a href="profil.php">Consulter</a></li>
<li><a href="profil.php">Identifiants</a></li>
<li><a href="profil_infos.php">Réglages</a></li>
<li class="radius_bas"><a href="profil_messagerie.php">Messageries</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="header_"><img src="../images/header1.jpg" width="980" height="164" alt="" /></div></code>
et le css de mon menu
#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
color:#0096B7;
list-style : none; /* on supprime le style par défaut de la liste */
text-align : left; /* on aligne le texte qui se trouve dans la liste à gauche */
}
#menu a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding-left : 9px; /* marge intérieure */
background:url(../images/deroulant.png) transparent ;
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 89px; /* largeur */
margin-left:-9px;
border-right: solid 1px #5a95e2;
border-left: solid 1px #5a95e2;
}
.radius_bas a {
border-radius:0 0 7px 7px;
border-right: solid 1px #5a95e2;
border-left: solid 1px #5a95e2;
border-bottom: solid 1px #5a95e2;
padding-bottom:2px;
}
#menu li /* Éléments des listes */
{
float : left; /* pour IE qui ne reconnaît pas "transparent" */
margin-right:10px;
cursor: pointer;
}
html>body #menu li
{
border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 89px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoie loin du champ de vision */
}
#menu a:hover /* Lorsque la souris passe sur un des liens */
{
color: #fff; /* On passe le texte en blanc... */
background:url(../images/deroulant2.png) transparent ;
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li
{
border-top : 0px; /* on met une bordure transparente en haut de chaque élément */
color:#FFFFFF;
}
#menu a:visited, #menu a:link
{
color: #fff; /* On passe le texte en blanc... */
outline:none;/* pas de pointillé autour */
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
color:#fff;
}si je met une position relative sur mon #menu li ul, l'affichage dans IE7 est impeccable mais le soucis est que mon image header1.jpg est decalé vers le bas et du coup laisse un affreux espace blanc.
Quelqu'un aurait une idée ?
Merci d'avance[/i][/i]