Firefox OK, Internet Explorer Problème

Firefox OK, Internet Explorer Problème - HTML/CSS - Programmation

Marsh Posté le 30-01-2007 à 20:12:04    

Bonsoir, mon site internet ( http://sas.pursud.org/Divers/Site_Multy_MyGames/ ) à un problème d'affichage avec internet explorer... contrairement à firefox qui s'affiche parfaittement bien, donc j'aimerais savoir d'où celà viens.
Si quelqu'un à une solution à ce problème, n'hésitez pas ;) .
Merci
 
http://img235.imageshack.us/img235/7329/sanstitreoi7.th.png

Reply

Marsh Posté le 30-01-2007 à 20:12:04   

Reply

Marsh Posté le 30-01-2007 à 23:00:36    

Commence déjà par faire de conteneurs "propres", sans balises br répétées...

Message cité 1 fois
Reply

Marsh Posté le 31-01-2007 à 06:55:05    

gebruik a écrit :

Commence déjà par faire de conteneurs "propres", sans balises br répétées...


pour rappel je lui avait fait des conteneurs propres
 
au niveau de la CSS qui déclare ton block au centre, rajoute un zoom:1, cela vient de là.
 
et fourni nous ton code CSS et ton code HTML, car depuis la derniere fois ou je t'avais livré un template propre, tu as du le pourrir depuis

Reply

Marsh Posté le 31-01-2007 à 21:03:18    

Citation :

tu as du le pourrir depuis


^^ :non:  
 
Ca va faire un peu long mais bon...
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.                    
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.                    
  5.                    
  6. <head>
  7.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  8. <title>...::Multy MyGames::...</title>
  9. <link rel="shortcut icon" type="image/x-icon" href="MMG_mini.ico" />
  10. <link rel="stylesheet" media="screen" type="text/css" title="Site Multy MyGames" href="css/mmg.css" />
  11. <link rel="stylesheet" media="screen" type="text/css" title="Site Multy MyGames" href="css/mmg2.css" />
  12.     <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  13.     <script type="text/javascript" src="js/prototype.lite.js"></script>
  14.     <script type="text/javascript" src="js/moo.fx.js"></script>
  15.     <script type="text/javascript" src="js/litebox-1.0.js"></script>
  16. </head>
  17.                    
  18.                    
  19. <body lang="fr" onload="initLightbox()">
  20.     <div id="container">
  21.     <div id="header"><h1>Multy MyGames</h1><span class="img"></span></div>
  22.         <div id="navigation">
  23.          <div class="block">
  27. <!--Debut Waitbox-->
  28. <div id="waitDiv" class="waitbox">
  29.   <table cellpadding="6" summary="Splash-Screen Wait">
  30.     <tbody>
  31.       <tr>
  32.         <td><b>Chargement en cours</b><br /><img src="img/loading2.gif" alt="Chargement en cours, Veuillez patienter..." title="Chargement en cours, Veuillez patienter..." /><br /> Veuillez patienter </td>
  33.       </tr>
  34.     </tbody>
  35.   </table>
  36. </div>
  37. <script type="text/javascript">
  38. var DHTML = (document.getElementById || document.all || document.layers);
  39. function ap_getObj(name)
  40. {
  41.   if (document.getElementById) { return document.getElementById(name).style; }
  42.   else if (document.all) { return document.all[name].style; }
  43.   else if (document.layers) { return document.layers[name]; }
  44. }
  45. function ap_showWaitMessage(div,flag)
  46. {
  47.   if (!DHTML) return; var x = ap_getObj(div); x.visibility = (flag) ? 'visible':'hidden'
  48.   if(! document.getElementById) if(document.layers) x.left=280/2; return true;
  49. }
  50. ap_showWaitMessage('waitDiv', 1);
  51. </script>
  52. <!--Fin Waitbox-->
  53.          
  54.          
  55.          
  56. <!--Titre Menu 1--><h2 class="leftcnr">Menu</h2>
  57.          
  58.          
  59.          
  60. <div class="block_ctn">
  61.        
  64. <!--Debut Menu 1--><br />
  65.             &nbsp; &nbsp;<a href="index2.html">Accueil</a>
  66.   <br /><br />
  67.   &nbsp; &nbsp;<a href="team.html">Ma Team</a>
  68.   <br /><br />
  69.   &nbsp; &nbsp;<a href="fd.html">Fonds d'&eacute;crans</a>
  70.   <br /><br />
  71.   &nbsp; &nbsp;<a href="liens.html">Liens</a>
  72.   <br /><br />
  73.   &nbsp; &nbsp;<a href="img/msn.bmp" rel="lightbox[example]" title="slash444@hotmail.fr">Contact</a>
  74.   <br /><br />
  75.   &nbsp; &nbsp;<a href="a_propos.html">A propos</a>
  76.   <br />
  77. <!--Fin Menu 1--><br />
  80.      
  81.  </div>
  82. </div>
  83.  <div class="block blk_mrg">
  84.          
  85.          
  86.          
  87. <!--Titre Menu 2--><h2 class="leftcnr">Rubriques</h2>
  88.          
  89.          
  90.          
  91.   <div class="block_ctn">
  92.       
  93.       
  94.       
  95. <!--Debut Menu 2--><br />
  96.   <center>
  97.   <a href="dow.html">Dawn of War</a>
  98.   <br />
  99.   <br />
  100.   <a href="magic.html">Magic WorkStation</a>
  101.   </center>
  102. <!--Fin Menu 2--><br />
  103.          
  104.          
  105.          
  106.   </div>
  107.  </div>
  108. </div>
  109.                    
  110.                
  111.         <div id="tools">
  112.      <div class="block">
  113.          
  114.          
  115.          
  116. <!--Titre Menu 3--><h2 class="rightcnr">Tribune libre</h2>
  117.          
  118.          
  119.          
  120.   <div class="block_ctn">
  121.                    
  122.          
  123.          
  124. <!--Debut Menu 3--><iframe src="http://www.i-tchat.com/10895" width="158" height="200" frameborder="0">
  125.             <a href="http://www.i-tchat.com" onclick="window.open('http://www.i-tchat.com/h-10895')">Voir la shoutbox</a>
  126. <!--Fin Menu 3--></iframe>
  127.                    
  128.                    
  129.                    
  130.  </div>
  131. </div>
  132.  <div class="block blk_mrg">
  133.          
  134.          
  135.          
  136. <!--Titre Menu 4--><h2 class="rightcnr">Liens</h2>
  137.                    
  138.                    
  139.                    
  140. <div class="block_ctn">
  141.                
  142.                
  143.                
  144. <!--Debut Menu 4--><center>
  145.   <br />
  146.   <a href="http://the301team.com" onclick="window.open(this.href); return false;"><img src="img/lien_clan_301.jpg" class="alpha2" border="0" title="Site de la [301]" alt="" /></a>
  147.   <br />
  148.   <a href="http://forum.hardware.fr" onclick="window.open(this.href); return false;"><img src="img/lien_forum_HFR.bmp" class="alpha2" border="0" title="Forum hardware.fr" alt="" /></a>
  149.   <br />
  150.   <br />
  151. <!--Fin Menu 4--></center>
  152.             
  153.          
  154.          
  155.      </div>
  156.  </div>
  157. </div>
  158.    <div id="content">
  159.      <div class="block">
  160.          
  161.          
  163.          
  164.          
  165.          
  166. <!--Titre Menu 2--><h2>Multy Mygames</h2>
  167.          
  168.          
  169.          
  170.   <div class="block_ctn">
  171.       
  172.       
  173.       
  174. <!--Debut News 1--><center>
  175.             <p>
  176.   <br /><font color="#9966FF"><i>Derni&egrave;re mise &agrave; jour</i>
  177.   <br />[27/01/07]</font>
  178.   <br />
  179.   <br />
  180.             <br />Bienvenue sur mon site !
  181.   <br />Vous pourrez trouver sur mon site diverses choses concernant ma team, il y a aussi une section sur diff&eacute;rents jeux PC et pour finir il y a des fonds d'&eacute;crans &agrave; t&eacute;l&eacute;charger. Je vous souhaite une bonne visite.
  182.      <br />
  183.   <br />
  184.   <br />
  185.   <br />
  186.   <br />
  187.   <br />
  188.   <br />
  189.   <br />
  190.   <br />
  191.   <br />
  192.   <br />
  193.   <br />
  194.             <br />
  195.             </p>
  196. <object type='application/x-shockwave-flash' data='miniplayer_v12.swf' width='0' height='0'>
  197. <param name='movie' value='<?=  ?>player.swf' />
  198. <param name='FlashVars' value='mp3=musique/PR_Intro2.mp3
  199. &amp;timecodecolor=x1594EE&amp;outterborder=x555555&amp;songtitlecolor=x1594EE
  200. &amp;loadingcolor=#FFFFFF&amp;background=xEEEEEE&amp;autoplay=true&amp;autoload=true&amp' />
  201.     </object>
  202. <!--Fin NEws 1--></center>
  203.          
  204.          
  205.          
  206.  </div>
  207. </div>
  209.                    
  210.          
  212. <!--Debut Waitbox-->
  213. <script type="text/javascript">
  214. setTimeout("ap_showWaitMessage('waitDiv', 0);",800)
  215. </script>
  216. <!--Fin Waitbox-->
  220.  </div>
  221. </div>
  222. </body>
  225. </html>


 
CSS1

Code :
  1. /*Definition des elements principaux*/
  2. * {margin:0; padding:0;}
  3. body {background:#FFFFFF; font-family:Verdana; font-size:0.7em;}
  4. #container {width:750px; margin:0 auto;}
  5. #header {width:641px; height:101px; position:relative; margin:0 auto 10px auto;}
  6. #header h1 {color:#ccc; font-family:bold "Times New Roman", Times, serif;}
  7. #header span.img {width:100%; height:100%; position:absolute; top:0; left:0; background: url(../img/header.png) no-repeat left top;}
  8. #navigation {width:160px; float:left; margin-right:10px;}
  9. #tools { width:160px; float:right; margin-left:10px;}
  11.   /*Definitions des blocks*/
  12. div.block h2, div.block h2.leftcnr, div.block h2.rightcnr {background:url(../img/blk_hd_bkg.png) repeat-x left top; border:1px solid #A097B0; color:#9966FF; font-size:12px; text-align:center; height:20px; line-height:20px; vertical-align:middle;  }
  13. div.block h2.leftcnr {background: url(../img/blk_hd_bkg_leftcnr.png) repeat-x left top; border-width:0 1px 0 0; height:22px; line-height:22px;}
  14. div.block h2.rightcnr {background: url(../img/blk_hd_bkg_rightcnr.png) repeat-x right top; border-width:0 0 0 1px; height:22px; line-height:22px;}
  15. div.block div.block_ctn {background:url(../img/blk_bkg.gif) left top; border:1px solid #DADADA}
  16. div.blk_mrg {margin-top:15px;}
  18. a:link { color:#777777; text-decoration:none; font-weight:normal; }
  19.     a:link{text-decoration:none;color:#777777;}
  20.     a:visited{text-decoration:none;color:#777777;}
  21.     a:hover{text-decoration:overline underline;color:#cacaca;}
  23. body {
  24.   background-color:#FFF;
  25.   color:#777777;
  26.   font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
  27.   margin:0;
  28.   padding:0;
  29. }
  31. .waitbox
  32. {
  33.    font-weight: bold;
  34.    font-size: 10px;
  35.    background-color: #e9e9e9;
  36.    cursor: pointer;
  37.    font-family: Verdana, Arial, Helvetica, sans-serif;
  38.    border: 1px solid #262C25;
  39.    margin-top: -70px;
  40.    margin-left: 313px;
  41.    position: absolute;
  42.    text-align: center;
  43.    }
  46.  
  47. #maframe {height:175px; overflow:auto;}
  49. #maframe2 {height:248px; overflow:auto;}
  51. #maframe3 {height:267px; overflow:auto;}
  53. #maframe4 {height:215px; overflow:auto;}


 
CSS2

Code :
  1. /*Definition des elements principaux*/
  2. * {margin:0; padding:0;}
  3. body {background:#FFFFFF; font-family:Verdana; font-size:0.7em;}
  4. #content {margin:0;  display:table-cell; _display:inline-block; }
  6. .alpha {
  7.   -moz-opacity:0.6; /*Firefox*/
  8.   filter:alpha(opacity=60); /*Internet Explorer*/
  9.   opacity:0.6; /*Safari, Opera 8.5  et autres (s'ils gèrent)*/
  10.   }
  11.  
  12. .alpha:hover {
  13.   -moz-opacity:1; /*Firefox*/
  14.   filter:alpha(opacity=100); /*Internet Explorer*/
  15.   opacity:1; /*Safari, Opera 8.5  et autres (s'ils gèrent)*/
  16.   }
  17.  
  18. .alpha2 {
  19.   -moz-opacity:0.4; /*Firefox*/
  20.   filter:alpha(opacity=40); /*Internet Explorer*/
  21.   opacity:0.4; /*Safari, Opera 8.5  et autres (s'ils gèrent)*/
  22.   }
  23.  
  24. .alpha2:hover {
  25.   -moz-opacity:1; /*Firefox*/
  26.   filter:alpha(opacity=100); /*Internet Explorer*/
  27.   opacity:1; /*Safari, Opera 8.5  et autres (s'ils gèrent)*/
  28.   }
  29.  
  30. .alpha3 {
  31.   -moz-opacity:0.4; /*Firefox*/
  32.   filter:alpha(opacity=40); /*Internet Explorer*/
  33.   opacity:0.4; /*Safari, Opera 8.5  et autres (s'ils gèrent)*/
  34.   }

Reply

Marsh Posté le 01-02-2007 à 11:12:13    

C'est normal les 2 "<br />" mis d'affilé aprés chaque élément des menus et les 13 "<br />" de la nouvelle?
Si tu veux laisser un gros espace entre plusieurs éléments, tu peux le faire grace aux marges et espacements indiqué dans les css.

Reply

Marsh Posté le 03-02-2007 à 10:46:56    

Euh ba c'est pas que je veux laisser un gros espace entre les éléments mais j'aimerais que celà face exactement pareil que sur firefox ou presque pareil parce que là ça fait vraiment moche sur IE.

Reply

Marsh Posté le 06-02-2007 à 10:12:24    

Le problème, si j'ai bien compris, c'est que FX et IE ne lisent pas les padding et les margin à l'identique, le plus simple serait que tu utilise les conditions CSS (ou instructions condidionnelles comme tu veux) dans ton entète d'appel de feulles de style et que tu crée deux feuilles de style : l'une pour IE et une autre pour FX, tiens voila un lien qui explique bien mieux les conditions et les problèmes de css entre les deux navigateurs.
 
 
http://www.siteduzero.com/tuto-3-2 [...] et-ff.html

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed