Problème de compatibilité IE et FF..
Bonjour, j'ai réussi à faire un menu déroulant en CSS sans javascript et j'ai un petit soucis de compatibilité.
Dans firefox la barre se déroule correctement mais sous internet explorer il ne se passe rien ça va faire quelque temps que je suis dessus :(
Code de ma page index.php :
[code]<html>
<head>
<title>Association - L'Hydre O'Mel</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="robots" content="all" />
<link rel="stylesheet" type="text/css" href="form.css" title="default" media="screen" />
<link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
</head>
<body>
<center>
<table id="Tableau_01" width="1024" height="819" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><img src="images/index_01.jpg" width="1024" height="149" alt=""></td>
</tr>
<tr>
<td colspan="3"><img src="images/index_02.jpg" width="205" height="86" alt=""></td>
<td rowspan="3"><div class="conteneur"></div></td>
<td rowspan="3"><img src="images/index_04.jpg" width="204" height="670" alt=""></td>
</tr>
<tr>
<td rowspan="2"><img src="images/index_05.jpg" width="12" height="584" alt=""></td>
<td>
<div class="conteneur_menu">
<div class="menu"> <?php include('menu.html') ?> </div>
</div>
</td>
<td rowspan="2"><img src="images/index_07.jpg" width="13" height="584" alt=""></td>
</tr>
<tr>
<td><img src="images/index_08.jpg" width="180" height="11" alt=""></td>
</tr>
</table>
</center>
</body>
</html>
/code
Code de ma page menu.html :
[code]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="robots" content="all" />
<link rel="stylesheet" type="text/css" href="form.css" title="default" media="screen" />
<link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
</head>
<body>
<center>
<ul id="menuDeroulant">
<li><a href="index.php">Accueil</a></li>
<li><a href="news.php">News</a></li>
<li><a href="forum/">Forum</a></li>
<li><a href="#">Activités</a>
<ul class="sousMenu">
<li><a href="warhammer-40k.php">Warhammer 40.000</a></li>
<li><a href="warhammer-battle.php">Warhammer Batle</a></li>
<li><a href="infinity.php">Infinity</a></li>
<li><a href="jdr.php">Jeux de Rôles</a></li>
<li><a href="poker.php">Poker</a></li>
<li><a href="magic.php">Magic l'Assemblée</a></li>
<li><a href="lan.php">Jeux en Réseau</a></li>
</ul>
</li>
<li><a href="plan.php">Plan</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="photos.php">Photos</a></li>
</ul>
</center>
</body>
</html>
/code
Code de mon form.css :
[code]/*---------------------- Corps de la page ----------------------*/
body {
background-color:black;
margin-top:25px;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin:0pt;
padding:0pt;
}
/*---------------------- Bloc mise en page ( index.php ) ----------------------*/
.conteneur {
background-image:url("images/index_03.jpg");
display:block;
height:670px;
width:615px;
}
/*---------------------- Menu déroulant ( index.php ) ----------------------*/
.conteneur_menu {
background-image:url("images/index_06.jpg");
display:block;
height:573px;
widht:180px;
}
.menu {
height:573px;
widht:180px;
}
/*---------------------- Menu déroulant ( menu.html ) ----------------------*/
#menuDeroulant {
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
top: 300px;
left: auto;
right:auto;
}
#menuDeroulant li {
border-top: 1px solid transparent;
margin: 0;
padding:0;
width:120px;
}
#menuDeroulant .sousMenu {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited {
display: block;
height: 1%;
width:165;
color: #FFF;
background: #312d26; /* Menu : couleurs des barres */
text-decoration: none;
font-weight: bold ;
font-size:12px;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding: 4px 8px;
border: 1px solid gray;
margin: 0;
}
#menuDeroulant li a:hover { background-color: #4b4c3f; } /* Menu : couleur changeante au passage de la souris */
#menuDeroulant li a:active { background-color: #3B4E77; } /* Menu : couleur changeante quand on clic sur un lien */
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited {
display: block;
color: #000000; /* Sous Menu : couleur du texte */
font-weight: bold ;
font-size:12px;
font-family: Geneva, Arial, Helvetica, sans-serif;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("fond.png") repeat;
border: 1px solid gray;
}
#menuDeroulant .sousMenu li a:hover {
background-image: none;
background-color: #534944; /* Sous Menu : couleur changeante au passage de la souris */
}
#menuDeroulant .sousMenu li {
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
}
#menuDeroulant li:hover > .sousMenu { display: block; }
#menuDeroulant .sousMenu li
{
margin: 0;
padding: 0;
}
/code
Voila quelqu'un aurait il une idée s'il vous plait, sans rajouté de javascript si possible.
Merci d'avance :jap:
Dans firefox la barre se déroule correctement mais sous internet explorer il ne se passe rien ça va faire quelque temps que je suis dessus :(
Code de ma page index.php :
[code]<html>
<head>
<title>Association - L'Hydre O'Mel</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="robots" content="all" />
<link rel="stylesheet" type="text/css" href="form.css" title="default" media="screen" />
<link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
</head>
<body>
<center>
<table id="Tableau_01" width="1024" height="819" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><img src="images/index_01.jpg" width="1024" height="149" alt=""></td>
</tr>
<tr>
<td colspan="3"><img src="images/index_02.jpg" width="205" height="86" alt=""></td>
<td rowspan="3"><div class="conteneur"></div></td>
<td rowspan="3"><img src="images/index_04.jpg" width="204" height="670" alt=""></td>
</tr>
<tr>
<td rowspan="2"><img src="images/index_05.jpg" width="12" height="584" alt=""></td>
<td>
<div class="conteneur_menu">
<div class="menu"> <?php include('menu.html') ?> </div>
</div>
</td>
<td rowspan="2"><img src="images/index_07.jpg" width="13" height="584" alt=""></td>
</tr>
<tr>
<td><img src="images/index_08.jpg" width="180" height="11" alt=""></td>
</tr>
</table>
</center>
</body>
</html>
/code
Code de ma page menu.html :
[code]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="robots" content="all" />
<link rel="stylesheet" type="text/css" href="form.css" title="default" media="screen" />
<link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
</head>
<body>
<center>
<ul id="menuDeroulant">
<li><a href="index.php">Accueil</a></li>
<li><a href="news.php">News</a></li>
<li><a href="forum/">Forum</a></li>
<li><a href="#">Activités</a>
<ul class="sousMenu">
<li><a href="warhammer-40k.php">Warhammer 40.000</a></li>
<li><a href="warhammer-battle.php">Warhammer Batle</a></li>
<li><a href="infinity.php">Infinity</a></li>
<li><a href="jdr.php">Jeux de Rôles</a></li>
<li><a href="poker.php">Poker</a></li>
<li><a href="magic.php">Magic l'Assemblée</a></li>
<li><a href="lan.php">Jeux en Réseau</a></li>
</ul>
</li>
<li><a href="plan.php">Plan</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="photos.php">Photos</a></li>
</ul>
</center>
</body>
</html>
/code
Code de mon form.css :
[code]/*---------------------- Corps de la page ----------------------*/
body {
background-color:black;
margin-top:25px;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin:0pt;
padding:0pt;
}
/*---------------------- Bloc mise en page ( index.php ) ----------------------*/
.conteneur {
background-image:url("images/index_03.jpg");
display:block;
height:670px;
width:615px;
}
/*---------------------- Menu déroulant ( index.php ) ----------------------*/
.conteneur_menu {
background-image:url("images/index_06.jpg");
display:block;
height:573px;
widht:180px;
}
.menu {
height:573px;
widht:180px;
}
/*---------------------- Menu déroulant ( menu.html ) ----------------------*/
#menuDeroulant {
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
top: 300px;
left: auto;
right:auto;
}
#menuDeroulant li {
border-top: 1px solid transparent;
margin: 0;
padding:0;
width:120px;
}
#menuDeroulant .sousMenu {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited {
display: block;
height: 1%;
width:165;
color: #FFF;
background: #312d26; /* Menu : couleurs des barres */
text-decoration: none;
font-weight: bold ;
font-size:12px;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding: 4px 8px;
border: 1px solid gray;
margin: 0;
}
#menuDeroulant li a:hover { background-color: #4b4c3f; } /* Menu : couleur changeante au passage de la souris */
#menuDeroulant li a:active { background-color: #3B4E77; } /* Menu : couleur changeante quand on clic sur un lien */
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited {
display: block;
color: #000000; /* Sous Menu : couleur du texte */
font-weight: bold ;
font-size:12px;
font-family: Geneva, Arial, Helvetica, sans-serif;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("fond.png") repeat;
border: 1px solid gray;
}
#menuDeroulant .sousMenu li a:hover {
background-image: none;
background-color: #534944; /* Sous Menu : couleur changeante au passage de la souris */
}
#menuDeroulant .sousMenu li {
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
}
#menuDeroulant li:hover > .sousMenu { display: block; }
#menuDeroulant .sousMenu li
{
margin: 0;
padding: 0;
}
/code
Voila quelqu'un aurait il une idée s'il vous plait, sans rajouté de javascript si possible.
Merci d'avance :jap:
A voir également:
- Problème de compatibilité IE et FF..
- Compatibilite windows 11 - Guide
- Ie tab - Télécharger - Outils pour navigateurs
- Ff gay ✓ - Forum Twitter
- Adresse ff - Forum Réseau
- Erreur 20 ff free - Forum Réseaux sociaux
4 réponses
Le problème c'est que les vieux IE sont à la rue en CSS (et en plein d'autre chose) donc ça me surprendrait que tu t'en sortes comme ça. Mais il paraît que IE8 sera plus respectueux des standards...
http://www.pcinpact.com/actu/news/41391-microsoft-IE8-compatibilite-rendu-W3C.htm
Si ça peut te consoler les menus déroulants ne marchent pas très bien souvent. Par exemple j'utilise iceweasel (le FF debian) : et ben les menus CCM ne marchent pas correctement, par contre ceux de blizzard oui... Bref peut-être devrais-tu t'inspirer du code de blizzard ?
http://www.blizzard.com/us/
Bonne chance
http://www.pcinpact.com/actu/news/41391-microsoft-IE8-compatibilite-rendu-W3C.htm
Si ça peut te consoler les menus déroulants ne marchent pas très bien souvent. Par exemple j'utilise iceweasel (le FF debian) : et ben les menus CCM ne marchent pas correctement, par contre ceux de blizzard oui... Bref peut-être devrais-tu t'inspirer du code de blizzard ?
http://www.blizzard.com/us/
Bonne chance
Bonjour,
Ce problème subsistera tant que tout les navigateurs interprèteront les codes à leur façon.
espérons qu'un jour cela sera solutionné !
Ce problème subsistera tant que tout les navigateurs interprèteront les codes à leur façon.
espérons qu'un jour cela sera solutionné !
Je tourne aussi sous une Debian, avec Iceweasel est ça fonctionne correctement pour moi les menu déroulant
