Problème css avec IE

Problème css avec IE - Web design - Graphisme

Marsh Posté le 19-03-2009 à 11:05:28    

Bonjour,
 
J'ai un problème d'affichage sur mon site avec IE qui est le seul à ne pas afficher correctement ma feuille de style.Pour l'instant je sèche.
 
Site: http://www.roflesselles.com/rof.php
 
fonctionne avec Firefox, Safari, Chrome et Opéra mais pas IE
 
Pouvez-vous m'aider?  
 

Code :
  1. body { 
  2. margin: 0; 
  3. padding:0; 
  4. position: absolute; 
  5. width: 100%; 
  6. height: 100%; 
  7. font-family: verdana, arial, sans-serif; 
  8. color:#ffffff; 
  9. font-size:10; 
  10. overflow:auto; 
  11. } 
  12.  
  13. /* position:absolute for all browsers - the whole page scrolls */ 
  14. div#headerwrap { 
  15.     position:fixed; 
  16.     width:100%; 
  17.     top:0; 
  18.     left:0; 
  19.     z-index: 1; 
  20. } 
  21. div#middlewrap { 
  22. /* set left margin and bottom padding for IE5/Win */ 
  23.     padding:170px 0 0 0; 
  24.     margin-left:0; 
  25. /* set left margin and bottom padding for others */ 
  26.     margin-left:0px; 
  27.     padding-bottom:20px; 
  28.     z-index: 1; 
  29. } 
  30.  
  31. /* no positioning for IE5/Win - the whole page scrolls */ 
  32. div#footerwrap { 
  33.     width:100%; 
  34.     position:fixed; 
  35.     bottom:0; 
  36.     z-index: 1; 
  37. } 
  38.  
  39. div#header { 
  40.     height:170px; 
  41.     width:800px; 
  42.     margin:0 auto; 
  43.     background:#06275f; 
  44.     z-index: 1; 
  45. } 
  46.  
  47. div#middle { 
  48.     width:800px; 
  49.     height:100%; 
  50.     margin:0 auto; 
  51.     background:#06275f; 
  52.     z-index: 1; 
  53. } 
  54. div#sidebar { 
  55.     width:160px; 
  56.     height:100%; 
  57.     float:left; 
  58.     background:#1C468D; 
  59.     position:fixed; 
  60.     z-index: 1; 
  61. } 
  62.  
  63. div#contentEdito {  
  64.     /* set left margin and bottom padding for IE5/Win */ 
  65.     padding:60px 0 0 0; 
  66.     padding-bottom:20px; 
  67.     margin-left:310px; 
  68.     width:330px;  
  69.     float:left; 
  70.     background:#06275f; 
  71.     z-index: 1; 
  72. } 
  73.  
  74. div#content { 
  75.     position:static; 
  76.     padding-top:60px; 
  77.     padding-bottom:20px; 
  78.     margin-left:160px; 
  79.     width:480px; 
  80.     float:left; 
  81.     background:#06275f; 
  82.     z-index: 1; 
  83. } 
  84.  
  85. div#scoop { 
  86.     top:230px;  
  87.     height:100%; 
  88.     width:150px;  
  89.     float:left; 
  90.     background:#06275f; 
  91.     position:fixed; 
  92.     margin-left:160px; 
  93.     z-index: 1; 
  94. } 
  95.  
  96. div#edito { 
  97.     position:static; 
  98.     left:300px; 
  99.     width:330px;  
  100.     overflow:hidden; 
  101.     margin:0 auto; 
  102.     background:#06275f; 
  103.     padding-bottom:20px; 
  104.     z-index: 1; 
  105. } 
  106.  
  107. div#BPub { 
  108.     top:170px;  
  109.     height:60px; 
  110.     width:480px;  
  111.     float:left; 
  112.     background:#ffffff; 
  113.     position:fixed; 
  114.     margin-left:160px; 
  115.     z-index: 1; 
  116. } 
  117.  
  118. div#BlkD { 
  119.     height:100%; 
  120.     width:160px; 
  121.     margin-left:640px; 
  122.     background:#f8d447; 
  123.     position:fixed; 
  124.     z-index: 1; 
  125. } 
  126.  
  127. div#footer { 
  128.     height:20px; 
  129.     width:800px; 
  130.     margin:0 auto; 
  131.     background:#d6262a; 
  132.     z-index: 1; 
  133. }


 

Code :
  1. <? 
  2. include("../start.php" ); 
  3. include("fonctions.php" ); 
  4. ?> 
  5. <head><script type='text/javascript' src='une.js'></script> 
  6. <link href='une.css' rel='stylesheet'> 
  7. <script language="javascript" type="text/javascript"> 
  8.     var Navigateur = navigator.appName; 
  9.     if(Navigateur == "Microsoft Internet Explorer" ){  
  10.         window.onload = fenetre; 
  11.     }  
  12. </script>  
  13. <script type="text/javascript" src="../slimbox/js/mootools.js"></script> 
  14. <script type="text/javascript" src="../slimbox/js/slimbox.js"></script> 
  15. <link rel="stylesheet" href="../slimbox/css/slimbox.css" type="text/css" media="screen" /> 
  16. <? 
  17. echo "<link href='../frames.css' rel='stylesheet' />"; 
  18. echo "<link href='../style/style.css' rel='stylesheet' type='text/css' /></head>"; 
  19.  
  20. /*----------------------------------------------------------------------------------------------------*/ 
  21. /*---------Programme---------------------------------------------------------------------------------*/ 
  22. /*----------------------------------------------------------------------------------------------------*/ 
  23.  
  24. echo "<div id='headerwrap'>"; 
  25.     echo "<div id='header'>";//bannière d'en haut  
  26.     BanniereNew("" );//(Ne pas toucher) 
  27.     echo "</div>"; 
  28. echo "</div>"; 
  29. echo "<div id='middlewrap'>"; 
  30.     echo "<div id='middle'>"; 
  31.         echo "<div id='sidebar'>";//menu de gauche 
  32.         accueilGauche($link,$session_link,$login,$passe,"menu_accueil.php",".." );//(Ne pas toucher) 
  33.         accueilClassement(".." ); 
  34.         echo "</div>"; 
  35.         echo "<div id='BPub'>";//bannière de pub  
  36.         BannierePub("" );//(Ne pas toucher) 
  37.         echo "</div>"; 
  38.         //echo "<div id='scoop2'></div>";//fond bleu 
  39.         echo "<div id='scoop'>";//barre de scoop 
  40.         scoop();// 
  41.         echo "</div>"; 
  42.         echo "<div id='contentEdito'>";//edito 
  43.         edito(); 
  44.         echo "</div>"; 
  45.         echo "<div id='BlkD'>";//bannière de droite 
  46.         droiteDmPmTeTb(".." ); 
  47.         echo "</div>"; 
  48.     echo "</div>"; 
  49. echo "</div>"; 
  50.  echo "<div id='footerwrap'>"; 
  51.     echo "<div id='footer'>"; 
  52.     accueilBreves();//(Ne pas toucher) 
  53.     echo "</div>"; 
  54. echo "</div>"; 
  55. ?>


Message édité par basima le 19-03-2009 à 11:46:30
Reply

Marsh Posté le 19-03-2009 à 11:05:28   

Reply

Marsh Posté le 19-03-2009 à 21:55:54    

Section html/css, pas design.
Et puis tu pourrais prendre 5 minutes et expliquer le problème aussi.


---------------
Studio CréeAll
Reply

Marsh Posté le 20-03-2009 à 08:37:23    

Désolé pour l'endroit comme j'ai un problème d'affichage j'ai tout de suite pensé graphisme. Comment faire pour déplacer son message dans le bon forum?
 
Mon problème est à l'affichage de mes pages avec Internet Explorer comparé aux autre navigateurs qui affichent très bien ces pages là. Le problème est que je ne sais pas pourquoi.
 
Comme un exemple visuel vaut mieux qu'une explication je vais faire des copies d'écran.
 
Avec IE:
http://pics.imagup.com/02/1237559617_ieScan.JPG
 
Avec Chrome:
http://pics.imagup.com/02/1237559657_chrScan.JPG
 
Avec Opera:
http://pics.imagup.com/02/1237559781_opeScan.JPG
 
Avec Safari:
http://pics.imagup.com/02/1237559802_safScan.JPG


Message édité par basima le 20-03-2009 à 09:51:11
Reply

Marsh Posté le 20-03-2009 à 16:05:39    

salut  
 
euh c'est quoi cette erreur javascript ? sur ta capture d'écran IE7 (?) je vois que tu as la même.
Pourquoi avoir utiliser des "frames", et pas afficher directement la bonne page  => site/Pages/menu_accueil.php
 
Sinon charge des outils de débuggage IEDevToolbar pour IE (<= 7) par exemple et/ou firebug pour firefox çà aide pas mal pour savoir où tu fais des coquilles et surtout çà permet de modifier des styles à chaud et de voir ce qui se passe sans recharger la page.
 
par exemple  
pour ta boite (div) middlewrap, y'a un padding-top:170px si tu le remets à 0 => plus de grosse zone blanche entre le bandeau/menu et le reste de la page.
 
pour la boite BPub t'a un margin-left:160px si tu le remets à 0 => çà le repositionne correctement à gauche.
 
Bref, normalement y'a moyen de faire pour que çà marche avec IE7 comme avec les autres, mais il faut repenser ta mise en page autrement et faire sans positionnement absolu ou fixe et vouloir tout positionner dans la page.
 
Sinon tu fais une feuille de style spécifique IE (avec juste les quelques styles corrigés) pour repositionner tout çà correctement et utiliser les "commentaires conditionnels" (recherche google) pour ajouter cette feuille de style uniquement pour IE. Même si personnellement je ferais plutôt l'effort de revoir la mise en page.
 
 


---------------
http://manooweb.fr  http://manoo.fr
Reply

Sujets relatifs:

Leave a Replay

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