Différences d'affichage entre IE7 et Firefox

mchevallier Messages postés 12 Date d'inscription   Statut Membre Dernière intervention   -  
Grunt Messages postés 2845 Statut Contributeur -
Bonjour,

Je rencontre un problème d'affichage entre IE7 et Firefox 3.
Le bon résultat est celui sous Firefox 3.

Voici le code de ma page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>top</title>

<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>

<style type="text/css">
<!--
body,td,th {
	font-family: "Trebuchet MS";
	color: #0066FF;
}
body {
	background-color: #000000;
}
dl, dt, dd, ul, li {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
#menu {
	position: absolute;
	top: 108px;
	left: 25%;
	z-index:100;
	width: 100%;
	right: 25%;
}
#menu dl {
	float: left;
	width: 100px;
	margin-top: 0px;
	margin-right: 1px;
	margin-bottom: 0px;
	margin-left: 1px;
}
#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	background-color: #000000;
	font-size: medium;
}
#menu li {
	text-align: center;
	background: #000000;
	font-size: small;
}
#menu li a, #menu dt a {
	color: #0066FF;
	text-decoration: none;
	display: block;
	height: 100%;
}
#menu li a:hover, #menu dt a:hover {
	background-color: #666666;
	color: #0099FF;
}
a {
	text-decoration: none;
	color: black;
}
-->
</style>
</head>

<body>
<div align="center" id="titre">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td height="2" colspan="3" align="center" valign="middle"><img src="../images/bordure.jpg" name="bordure_haut" width="100%" height="2" id="bordure_haut" /></td>
  </tr>
  
  <tr>
    <td width="33%" height="10"></td>
    <td width="33%"></td>
    <td width="33%"></td>
    </tr>  
	
  <tr>
    <td height="80" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td align="center" valign="middle" bgcolor="#000000"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload2.macromedia.com/get/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" name="bandeau_titre" width="600" height="80" id="bandeau_titre" title="Dr&ocirc;le d'Oiseau">
          <param name="movie" value="../flash/bandeau_titre.swf" />
          <param name="quality" value="high" />
          <embed src="../flash/bandeau_titre.swf" width="600" height="80" quality="high" pluginspage="https://get.adobe.com/flashplayer/" type="application/x-shockwave-flash" name="bandeau_titre"></embed>
                </object></td>
    <td valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    </tr>  
	
  <tr>
    <td height="35">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  
 </table>
</div>

<div id="menu" align="center">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="main.html" target="main" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Kites</dt>
			<dd style="display: none;" id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="moa.html" target="main">Moa</a></li>
					<li><a href="kiwi.html" target="main">Kiwi</a></li>
					<li><a href="canardo.html" target="main">Canardo</a></li>
					<li><a href="canard.html" target="main">Canard</a></li>
				</ul>
			</dd>
	</dl>
		
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Accessoires</dt>
			<dd style="display: none;" id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="#">Tee-shirts</a></li>
					<li><a href="#">Sweats</a></li>
					<li><a href="#">Sangles</a></li>
					<li><a href="#">Sac de transport</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Multimédia</dt>
			<dd style="display: none;" id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="../images/photos/kites/kites.html" target="main">Kites</a></li>
					<li><a href="../images/photos/festival/festival.html" target="main">Festival</a></li>
					<li><a href="../images/photos/divers/divers.html" target="main">Divers</a></li>
					<li><a href="videos.html" target="main">Vidéos</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Contacts</dt>
			<dd style="display: none;" id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="revendeurs.html" target="main">Revendeurs</a></li>
					<li><a href="../team/team.html" target="main">Team</a></li>
					<li><a href="emails.html" target="main">E-mail</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu5');">Divers</dt>
			<dd style="display: none;" id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="goodies.html" target="main">Goodies</a></li>
					<li><a href="Revue_presse.pdf" target="_blank">Revue de presse</a></li>
					<li><a href="rss.xml" target="_blank">Flux RSS</a></li>
					<li><a href="http://www.frappr.com/droledoiseau" target="_blank"><img src="../images/Frappr.png" alt="Frappr!" name="frappr" width="64" height="18" border="0" id="frappr" /></a></li>
				</ul>
			</dd>
	</dl>
</div>
</body>
</html>


Il y a un décallage au niveau de mes sous-menus qui fait que l'on ne voit pas tout les menus (les derniers n'apparaissent pas sous IE7 car cette page fait partie d'un jeu de 2 cadres).

Si vous avez une idée, je suis preneur !

Merci.
A voir également:

2 réponses

phil
 
le mieux c'est que tu mette une note dans ton site qui dise attention site optimiser pour firefox les problèmes d'affichage sont dues au fait que IE7 bien que plus performant que les versions précédentes ne prend pas en compte tout les codes HTML pour ce que j'en sais ^^
0
Grunt Messages postés 2845 Statut Contributeur 301
 
Oui, IE7 n'est pas vraiment un navigateur Web. En gros, Firefox, Opera, Epiphany, Konqueror et bien d'autres affichent correctement ton code HTML, mais IE non.
Ce n'est pas grave, IE n'est utilisé que sur une seule plateforme, et beaucoup d'autres navigateurs sont disponibles :)
0