Probleme de compatibilité de mon site sous ie6 et ie7

bonjour à tous ,

je suis nouveau sur le forum et voila mon problème :
en effet je construis un mini site(xhtml et css) pour ma clinique et je rencontre des problemes de compatibilité sous ie6 et ie 7 alors que sous ie8 c'est parfait.
je pense qu'il s'agit de ma commande display:inline-block que j'utilise pour mon menu mais qui n'ai pas pris en charge par ie6 et mal compris sous ie7.
je vous fais suivre mon code du css puis celui du html car le site est en intranet et non accessible de l'extérieur
merci par avance de vos réponses car je craque un peu

"code css"

#menu {width:900px;
margin-left: auto;   margin-right: auto;
 height:80px; background:url(icons/arrows8bis2.gif);
 background-repeat: no-repeat;
   text-align:center;
   border:0px solid #c5d5e8;
    border-width:0px
	margin-left: auto;   margin-right: auto; } 
	
	
	
#menu ul {margin:0;
 padding:0;
  list-style:none;
   white-space:nowrap;}
   
 #menu ul {display:inline-block;}
  #menu li {display:inline-block;   display:inline;} 
 #menu ul.level1 div {
	position:absolute;
	left:-9999px;
	visibility: visible;
} 
 
 #menu ul.level1 {margin:0 auto;} 
 
 #menu ul.level1 li.level1-li {float:left; display:block; position:relative; padding-top:2px;}
  #menu ul li div ul {margin:0; background:url(transparent);} 
  
  #menu a.level1-a {display:block; height:23px; font:bold 12px Comic Sans MS; color:#010101; line-height:21px; text-decoration:none;padding:0 15px 0 15px; text-align:center;}
   #menu ul.level1 li.level1-li a.level1-a {float:left;} 
   
  #menu ul li:hover div {left:50%; top:25px; padding-top:0; background:url(transparent);}
  
   #menu ul li:hover div ul {position:relative; left:-39%; padding:7px 0 0 0; margin:0; list-style:none;}
   
    #menu ul li div ul li a {display:inline-block; font:bold 12px Comic Sans MS; color:#010101; line-height:20px; text-decoration:none; padding:1px 6px 2px 6px;} 
	
	#menu a:hover div {left:0; top:25px;} 
	
	#menu a:hover div ul {position:relative; left:-50%; padding-top:7px;}
	
	 #menu li:hover div ul li {display:inline-block;} 
	 
	 #menu a:hover div ul li a.sub {margin-right:4px;}
	 
	  #menu li a.fly {background:url(transparent) no-repeat center bottom;} 
	  
	  #menu li a:hover, #menu li a.fly:hover {white-space:nowrap; color:#fff; border:1px solid #000; padding:0 14px; border-width:0 1px; background:url(icons/arrows5bis.gif) repeat-x;}
	  
	   #menu li:hover > a, 
	   #menu ul li:hover > a.fly {white-space:nowrap; color:#fff; border:1px solid #000; padding:0 14px; border-width:0 1px; background:url(icons/arrows5bis.gif) repeat-x;}
	   
	    #menu ul li div ul li a:hover {color:#000;} 
		
		#menu ul :hover div ul div {left:-9999px;} 
		
		#menu ul :hover div ul li:hover {position:relative;}
		
		 #menu ul :hover div ul li a.drop {background:url(transparent) no-repeat center bottom;}
		 
		  #menu ul :hover div ul li a:hover {position:relative; background:url(icons/arrows3.gif); padding:0 5px 1px 5px; border:1px solid #c5d5e8; color:#000;} 
		  
		  #menu ul :hover div ul li:hover > a {position:relative; background:url(icons/arrows3.gif); padding:0 5px 1px 5px; border:1px solid #c5d5e8; color:#000;} 
		  
		  #menu ul :hover div ul :hover div {left:50%; top:22px;} 
		  
		  #menu ul :hover div ul :hover div ul {left:-50%; padding:10px; background:url(icons/arrows6.gif); border:1px solid #fff; border-color:#fff #678 #567 #fff; text-align:center; filter: alpha(opacity=80); opacity:0.8} 
		  #menu ul :hover div ul :hover div ul li {display:block; height:auto; line-height:15px; text-align:center;} 
		  
		  #menu ul :hover div ul :hover div ul li a {height:auto; position:static; line-height:15px; color:#000; padding:1px 0;} 
		  
		  #menu ul a:hover div ul a:hover div ul li a {margin-left:-16px;} 
		  
		  #menu ul :hover div ul :hover div ul li a:hover {color:#369; background:transparent; border:0; padding:1px 0;}
		  
		   #menu table {position:absolute; top:0; height:0; width:0; left:50%; border-collapse:collapse;}
		   
		    #menu a:hover table a:hover table {left:50%; width:0; height:20px; top:0; margin-left:-1px;}
			
			 #menu ul :hover div ul :hover div ul li:hover a {background:transparent; border:0;}
			 
			 
			 #corps {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	top: 140px;
	height:1000px;
	color:#369;
	background:transparent;
	border:transparent;
	text-align:center;
	padding: 0px 0px 0px 0px;
	left: auto;
	right: auto;
	}
	
	
	

Modifié par ricotte (04 Mar 2010 - 13:32)

"code html"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<head>




<link rel="stylesheet" media="all" type="text/css" href="dropline-center.css" />




<title>Articles d'imagerie</title>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">
<!--
body {
	background-color: #ceddc8;
	background-image: url(icons/zen.jpg);
	background-repeat: no-repeat;
}
body,td,th {
 
	color: #000000;
}
.Style3 {color: #CC0033}
-->
 

</style></head>

<body>


      <div id="menu">
        <ul class="level1">
          <li class="level1-li"><a class="level1-a" href="index.html">HOME</a></li>
          <li class="level1-li"><a class="level1-a fly" href="#url">RADIOLOGIE
            <!--[if gte IE 7]><!-->
            </a>
              <!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
              <div>
                <ul>
                  <li><a class="drop" href="#url">Locomoteur
				  <!--[if gte IE 7]><!-->
                    </a>
                      <!--<![endif]-->
                      <!--[if lte IE 6]><table><tr><td><![endif]-->
                      <div>
                        <ul>
                          <li><a href="Radio-MI.html" target="corps">Membre Inf</a></li>
                          <li><a href="Radio-Ms.html"target="corps">Membre Sup</a></li>
                          <li><a href="Radio-Rachis.html"target="corps">Rachis</a></li>
					    </ul>
                      </div>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                  </li>  
						  
                  <li><a href="Radio-Divers.html"target="corps">Divers</a></li>
				  
				  
                  <li><a class="drop" href="#url"target="corps">Uro Digestif</a>
				  			  
				  <div>
				  <ul>
				  <li><a href="Radio-Abdo.html"target="corps">Abdomen</a></li>
				  <li><a href="Radio-Pelvis.html"target="corps">Pelvis</a></li>
				   </ul>
				  </div>
				  </li>
				  
				  
                  <li><a href="Radio-Neuro.html"target="corps">Neuro</a>
				  <li><a href="Radio-A V.html"target="corps">Vasculaire</a></li>
				  
				  <li><a href="Radio-Thorax.html"target="corps">Thorax</a></li>
				  
				  <li><a href="Radio-Pediartrie.html"target="corps">Pédiatrie</a></li>
				  
				  <li><a href="Radio-Ostéodensitometrie.html"target="corps">Ostéodensitométrie</a></li>
                </ul>
              </div>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
          </li>
          <li class="level1-li"><a class="level1-a fly" href="#url">ECHOGRAPHIE
           <!--[if gte IE 7]><!-->
            </a>
              <!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
              <div>
                <ul>
                  <li><a class="drop" href="#url">Locomoteur
				  <!--[if gte IE 7]><!-->
                    </a>
                      <!--<![endif]-->
                      <!--[if lte IE 6]><table><tr><td><![endif]-->
                      <div>
                        <ul>
                          <li><a href="Echographie-MI.html"target="corps">Membre Inf</a></li>
                          <li><a href="Echographie-Ms.html"target="corps">Membre Sup</a></li>
					    </ul>
                      </div>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                  </li>  
				<li><a href="Echographie-Interventionnelle.html"target="corps">Interventionnelle</a></li>	  
                  <li><a href="Echographie-Divers.html"target="corps">Divers</a></li>
				  
				  
                  <li><a class="drop" href="#url">Uro Digestif  <!--[if gte IE 7]><!-->
                    </a>
                      <!--<![endif]-->
                      <!--[if lte IE 6]><table><tr><td><![endif]-->
				  			  
				  <div>
				  <ul>
				  <li><a href="Echographie-Abdo.html"target="corps">Abdomen</a></li>
				  <li><a href="Echographie-Pelvis.html"target="corps">Pelvis</a></li>
				   </ul>
				  </div>
				   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
				  </li>
				  
				  
                  <li><a href="Echographie-Neuro.html"target="corps">Neuro</a>
				  <li><a href="Echographie-A V.html"target="corps">Vasculaire</a></li>
				  
				  <li><a href="Echographie-Thorax.html"target="corps">Thorax</a></li>
				  
				  <li><a href="Echographie-Pediartrie.html"target="corps">Pédiatrie</a></li>
                </ul>
              </div>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
          </li>
          <li class="level1-li"><a class="level1-a fly" href="#url">SENOLOGIE
            <!--[if gte IE 7]><!-->
            </a>
              <!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
              <div>
                <ul>
                  <li><a href="Sénologie-Mammographie.html"target="corps">Mammographie</a></li>
                  <li><a href="Sénologie-Divers.html"target="corps">Divers</a></li>
                  <li><a href="Sénologie-Mammotome.html"target="corps">Mammotome</a></li>
               </ul>
              </div>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
          </li>
          <li class="level1-li left"><a class="level1-a fly" href="#url">SCANNER
            <!--[if gte IE 7]><!-->
            </a>
              <!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
              <div>
                <ul>
                  <li><a class="drop" href="#url">Locomoteur
				  <!--[if gte IE 7]><!-->
                    </a>
                      <!--<![endif]-->
                      <!--[if lte IE 6]>
					  <table><tr><td>
					  <![endif]-->
                      <div>
                        <ul>
                          <li><a href="Scanner-MI.html"target="corps">Membre Inf</a></li>
                          <li><a href="Scanner-Ms.html"target="corps">Membre Sup</a></li>
                          <li><a href="Scanner-Rachis.html"target="corps">Rachis</a></li>
					    </ul>
                      </div>
                    <!--[if lte IE 6]> 
					</td></tr>
					</table></a>
					<![endif]-->
                  </li>  
						  
                  <li><a href="Scanner-Divers.html"target="corps">Divers</a></li>
				  
				  
                  <li><a class="drop" href="#url">Uro Digestif <!--[if gte IE 7]><!-->
                    </a>
                      <!--<![endif]-->
                      <!--[if lte IE 6]><table><tr><td><![endif]-->
				  			  
				  <div>
				  <ul>
				  <li><a href="Scanner-Abdo.html"target="corps">Abdomen</a></li>
				  <li><a href="Scanner-Pelvis.html"target="corps">Pelvis</a></li>
				   </ul>
				  </div>
				  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
				  </li>
				  
				  
                  <li><a href="Scanner-Neuro.html"target="corps">Neuro</a>
				  <li><a href="Scanner-A V.html"target="corps">Vasculaire</a></li>
				  
				  <li><a href="Scanner-Thorax.html"target="corps">Thorax</a></li>
				  
				  <li><a href="Scanner-Pediartrie.html"target="corps">Pédiatrie</a></li>
                </ul>
              </div>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
          </li>
          <li class="level1-li left"><a class="level1-a fly" href="#url">IRM
		  <!--[if gte IE 7]><!-->
            </a>
              <!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
              <div>
                <ul>
                  <li><a class="drop" href="#url">Locomoteur
				  <!--[if gte IE 7]><!-->
                    </a>
                      <!--<![endif]-->
                      <!--[if lte IE 6]><table><tr><td><![endif]-->
                      <div>
                        <ul>
                          <li><a href="IRM-MI.html"target="corps">Membre Inf</a></li>
                          <li><a href="IRM-Ms.html"target="corps">Membre Sup</a></li>
                          <li><a href="IRM-Rachis.html"target="corps">Rachis</a></li>
					    </ul>
                      </div>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                  </li>  
						  
                  <li><a href="IRM-Divers.html"target="corps">Divers</a></li>
				  
				  
                  <li><a class="drop" href="#url">Uro Digestif <!--[if gte IE 7]><!-->
                    </a>
                      <!--<![endif]-->
                      <!--[if lte IE 6]><table><tr><td><![endif]-->
				  			  
				  <div>
				  <ul>
				  <li><a href="IRM-Abdo.html"target="corps">Abdomen</a></li>
				  <li><a href="IRM-Pelvis.html"target="corps">Pelvis</a></li>
				   </ul>
				  </div>
				  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
				  </li>
				  
				  
                  <li><a href="#url"target="corps">Neuro</a>
				  <li><a href="IRM-A V.html" target="corps">Vasculaire</a></li>
				  
				  <li><a href="IRM-Neuro.html"target="corps">Thorax</a></li>
				  
				  <li><a href="IRM-Pediartrie.html"target="corps">Pédiatrie</a></li>
                </ul>
              </div>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
          </li>
		  <li class="level1-li left"><a class="level1-a fly" href="#url">MESURES
		  <!--[if gte IE 7]><!-->
            </a>
              <!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
              <div>
                <ul>
                  <li><a class="drop" href="#url">Radiologie
				  <!--[if gte IE 7]><!-->
                    </a>
                      <!--<![endif]-->
                      <!--[if lte IE 6]><table><tr><td><![endif]-->
                      <div>
                        <ul>
                          <li><a href="Les Mesures-Radiologie-Membre inferieur.html"target="corps">Membre Inf</a></li>
                          <li><a href="Les Mesures-Radiologie-Membre supérieur.html"target="corps">Membre Sup</a></li>
                          <li><a href="Les Mesures-Radiologie-rachis.html"target="corps">Rachis</a></li>
					    </ul>
                      </div>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                  </li>  
						  
                  			  
				  
                  <li><a class="drop" href="#url">Echographie</a>
				  <!--[if gte IE 7]><!-->
                    </a>
                      <!--<![endif]-->
                      <!--[if lte IE 6]><table><tr><td><![endif]-->
                      <div>
                        <ul>
                          <li><a href="Les Mesures-Echographie-Membre inferieur.html"target="corps">Membre Inf</a></li>
                          <li><a href="Les Mesures-Echographie-Membre supérieur.html"target="corps">Membre Sup</a></li>
					    </ul>
                      </div>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                  </li>
                  <li><a class="drop" href="#url">Scanner</a>
				  <!--[if gte IE 7]><!-->
                    </a>
                      <!--<![endif]-->
                      <!--[if lte IE 6]><table><tr><td><![endif]-->
                      <div>
                        <ul>
                          <li><a href="Les Mesures-Scanner-Membre inferieur.html"target="corps">Membre Inf</a></li>
                          <li><a href="Les Mesures-Scanner-Membre supérieur.html"target="corps">Membre Sup</a></li>
                          <li><a href="Les Mesures-Scanner-rachis.html"target="corps">Rachis</a></li>
					    </ul>
                      </div>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                  </li>
				  
				  <li><a class="drop" href="#url">IRM</a>
				  <!--[if gte IE 7]><!-->
                    </a>
                      <!--<![endif]-->
                      <!--[if lte IE 6]><table><tr><td><![endif]-->
                      <div>
                        <ul>
                          <li><a href="Les Mesures-IRM-Membre inferieur.html"target="corps">Membre Inf</a></li>
                          <li><a href="Les Mesures-IRM-Membre supérieur.html"target="corps">Membre Sup</a></li>
                          <li><a href="Les Mesures-IRM-rachis.html"target="corps">Rachis</a></li>
					    </ul>
                      </div>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                  </li>
				  
				  <li><a class="drop" href="#url">Pacs</a>
				  <!--[if gte IE 7]><!-->
                    </a>
                      <!--<![endif]-->
                      <!--[if lte IE 6]><table><tr><td><![endif]-->
                      <div>
                        <ul>
                          <li><a href="Pacs.html"target="corps">Divers</a></li>
					    </ul>
                      </div>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                  </li>
                </ul>
              </div>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
	      <li class="level1-li"><a class="level1-a fly" href="#url">EPU
            <!--[if gte IE 7]><!-->
            </a>
              <!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
              <div>
                <ul>
                  <li><a href="INTERVENTIONS EPU MEDECINS.html"target="corps">Médecins</a></li>
                  <li><a href="INTERVENTIONS EPU MANIPULATEURS.html"target="corps">Manipulateurs</a></li>
               </ul>
              </div>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
          </li>
        </ul>
      </div>
      <p class="info">&nbsp;</p>
    </div>
  </div>
</div>

<div id="corps"><iframe src="Untitled-2.html"  frameborder="0" name="corps" width="900" height="auto"  scrolling="auto" id="corps" allowtransparency="true" ></iframe>
</div>

</body>
</html>

	

Modifié par ricotte (04 Mar 2010 - 13:31)

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Merci et désolé...

mais s'il y a des réponses à mon problème je suis preneur.....
Modifié par ricotte (04 Mar 2010 - 13:38)

j'ai résolu mon pb

j'ai intégrer un 2eme css pour ie6 avec quelques correctifs de code et c'est parfait

   1. #menu ul {display:inline;}
   2. #menu li:hover div ul li {display:inline;}
   3. #menu :hover div ul :hover div ul li a {margin-left:-16px;}

par contre je rencontre un pb qui est une vraie colle : en effet mon anim flash ne fonctionne pas sur tous les postes avec ie8 alors que leurs config et options internet sont identiques

si vous avez des idées

peut être l'intégration de mon anim flash

merci de vos réponses

   1. <object
   2.
   3. classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   4. codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
   5. width="396" height="365">
   6.    <param name="eanim" value="!e-anim:Rico">
   7.    <param name="movie" value="flash/ricobis1.swf">
   8.    <param name="quality" value="high">
   9.    <param name="wmode" value="transparent">
  10.    <embed src="flash/ricobis1.swf" width="396" height="365"
  11.  quality="high"
  12.    wmode="transparent"
  13.  pluginspage="http://www.macromedia.com/go/getflashplayer"
  14.  type="application/x-shockwave-flash">
  15.     </embed>
  16. </object>
  17. <!--[if !IE]>-->
  18.    <object type="application/x-shockwave-flash" data="flash/ricobis1.swf" width="396" height="365">
  19.     <param name="play" value="true" />
  20.     <param name="loop" value="true" />
  21.     <param name="quality" value="high" />
  22.     <param name="wmode" value="transparent" /><!--<![endif]-->
  23.
  24.    <!--[if !IE]>-->