Bonjour à tous,
Je developpe un site web et je rencontre un problème; Mon menu latéral gauche n'apparit pas sous IE7 alors qu'il est bien présent pour tout les autres navigateurs testés ( safari, google chrome, firefox, Opéra ). Dans mon passé je n'ai jamais développé pour plusieurs navigateurs mais pour qu'un seul donc je ne sais pas du tout ou cela coince ... please help me
Voici la page HTML qui va avec ....
Merci pour toutes vos réponses ...
Je developpe un site web et je rencontre un problème; Mon menu latéral gauche n'apparit pas sous IE7 alors qu'il est bien présent pour tout les autres navigateurs testés ( safari, google chrome, firefox, Opéra ). Dans mon passé je n'ai jamais développé pour plusieurs navigateurs mais pour qu'un seul donc je ne sais pas du tout ou cela coince ... please help me
/* Général */
body {
min-height: 680px;
min-width : 640px;
max-width : 1200px;
background-color : #ffffff;
margin-right:auto;
margin-left:auto;
margin-top: 0px;
font-family: Verdana, arial, sans-serif;
font-size: 75%;
text-align:center;
padding:0px;
text-align:left;
}
hr {
margin-top:0px;
margin-bottom:0px;
}
table {
border : solid 2px black ;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
/* BLOC HEADER */
.leblocheader {
border : none ;
width: 100%;
height: 110px;
margin-top : 0px;
margin-right : 0px;
}
.imagenorm{
position : relative;
margin-top : 0px;
width : 720px;
background: url('../image/banner_norm.png');
}
.imageplus{
position : relative;
margin-top : 0px;
width : auto;
background-image:url('../image/banner_plus.png');
background-repeat: repeat-x;
}
.imagefin{
position : relative;
margin-top : 0px;
width : 11px;
background:#FFF url('../image/banner_fin.png');
}
/*********bloc millieu ***************/
/* Menu de gauche */
.blocmenu {
position : absolute;
width:216px;
height : auto;
margin-top: 10px;
margin-left : 0px;
}
#menu22 {
width: 210px;
margin: 10px;
}
#menu22 ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu22 li a {
height: 31px;
width: 210px;
voice-family: "\"}\"";
voice-family: inherit;
font-weight: bold ;
text-decoration: none;
}
/* N'oubliez pas de renseigner l'adresse des images */
#menu22 li a:link, #menu22 li a:visited {
color: black;
display: block;
background: url(../image/menu222.gif);
padding-left: 6px;
padding-top: 8px;
}
#menu22 li a:hover {
color: white;
background: url(../image/menu222.gif) 0 -39px;
padding-left: 6px;
padding-top: 8px;
}
/* Corp de la page */
.contenu
{
background-color: #fff0d4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 4px solid #fff0d4;
padding: 10px;
margin-left : 230px;
margin-top: 10px;
margin-bottom : 0px;
width: auto;
min-height : 680px;
height: auto;
padding-top : 15px;
padding-left :auto;
padding-right :auto;
padding-bottom : 8px;
position : relative ;
}
.contenucon{
background-color: #fff0d4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 4px solid #fff0d4;
padding: 10px;
margin-bottom : 0px;
margin-top : 15px;
width: 500px;
height: auto;
padding-top : 15px;
margin-right:auto;
margin-left:auto;
padding-bottom : 8px;
position : relative ;
}
.mention{
background-color: #fff0d4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 4px solid #fff0d4;
padding: 10px;
margin-left : 230px;
margin-top: 10px;
margin-bottom : 0px;
width: auto;
height: 20px;
padding-top : 15px;
padding-left : 8px;
padding-right : 8px;
padding-bottom : 8px;
position : relative ;
padding-top : 10px;
font-family: verdana, arial, sans-serif;
font-size: 8px;
text-align:center;
color:gray;
}
.mentioncon{
background-color: #fff0d4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 4px solid #fff0d4;
padding: 10px;
margin-right:auto;
margin-left:auto;
margin-top: 10px;
margin-bottom : 0px;
width: 500px;
height: 20px;
padding-top : 15px;
padding-left : 8px;
padding-right : 8px;
padding-bottom : 8px;
position : relative ;
padding-top : 10px;
font-family: verdana, arial, sans-serif;
font-size: 8px;
text-align:center;
color:gray;
}
.amention{
font-family: verdana, arial, sans-serif;
font-size: 8px;
text-align:center;
color:#7b7575;
text-decoration: none;
}
.amention:hover {
font-family: verdana, arial, sans-serif;
font-size: 8px;
text-align:center;
color:#7b7575;
text-decoration: underline;
}
Voici la page HTML qui va avec ....
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>XXXXX</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<!-- Liens vers tout les fichiers CSS, JS ...Etc -->
<link href="./CSS/new_css.css" rel="stylesheet" type="text/css" />
<script src="./js/rafraichissement.js" type="text/javascript"></script>
<!-- ****************** Ici commence le bloc du header ****************** -->
</head>
<body>
<!-- ****************** Ici commence le bloc du header ****************** -->
<table class="leblocheader" cellspacing="0">
<tr>
<td class=imagenorm ></td>
<td class=imageplus ></td>
<td class=imagefin ></td>
</tr>
</table>
<!-- ****************** Ici commence le bloc du menu ****************** -->
<div class="blocmenu">
<div id="menu22">
<ul>
<li><img src="./image/menu.png" /></li>
<li><a href="#" title="Lien 1">xxxxx</a></li>
<li><a href="#" title="Lien 2">xxxxx</a></li>
<li><a href="#" title="Lien 3">xxxx</a></li>
<li><a href="#" title="Lien 4">xxxx</a></li>
<li><a href="#" title="Lien 5">xxxx</a></li>
<li><a href="#" title="Lien 6">xxxx</a></li>
<li><a href="#" title="Lien 7">xxxx</a></li>
<li><a href="#" title="Lien 8">xxxx</a></li>
<li><a href="#" title="Lien 9">xxxx</a></li>
<li><a href="#" title="Lien 10">xxxx (autre CI)</a></li>
<li><a href="#" title="Lien 14">changer mes coordonées</a></li>
<li><a href="#" title="Lien 15">changer mon mot de passe</a></li>
<li><a href="#" title="Lien 16">Se déconnecter</a></li>
</ul>
</div>
</div>
<div class="contenu">
</div>
<div class="mention">
<hr/>
<a class="amention" href="contact.php">Contact</a> -
<a class="amention" href="mentions.html" target=_bank>Mentions légales</a> -
© XXXXX - tous droits réservés -<br/>
www.xxxxxxxx.com version 1.0 béta
</div>
</body>
</html>
Merci pour toutes vos réponses ...