Se connecter / S'enregistrer
Votre question

Problème avec l'affichage de mon site sous internet explorer

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
19 Juillet 2010 13:54:39

Bonjour,

Je sais que de nombreux sujets ont été posté sur ce sujet mais je n'arrive pas à trouver la bonne solution pour mon problème.
J'ai des problèmes d'affichage de mon site sur internet explorer.
Sur Firefox tous va bien : mon site est correctement centré sur ma page mais sous IE, l'ensemble de ma page vient se caller à gauche le mon cadre central se duplique de façon bizarre.

voici le code de ma page :
  1. <html>
  2. <title>Titre site
  3. <link rel="shortcut icon" HREF="images/favicon.ico" >
  4. <link rel="stylesheet" type="text/css" href="layout.css" />
  5. <style type="text/css">
  6. <!--
  7. .Style2 {color: #58595b}
  8. .Style3 {
  9. color: #17446a;
  10. font-weight: bold;
  11. }
  12. a:link {
  13. color: #58595b;
  14. text-decoration: none;
  15. }
  16. a:visited {
  17. color: #58595b;
  18. text-decoration: none;
  19. }
  20. .Style5 {font-size: 10px; color: #58595b; font-weight:bold; }
  21. a:hover {
  22. text-decoration: none;
  23. }
  24. a:active {
  25. text-decoration: none;
  26. }
  27. .Style7 { color: #58595b;
  28. font-size: 11px;
  29. }
  30. .Style12 {font-size: 10px; color: #A55B24; font-weight: bold; }
  31. -->
  32. </style>
  33. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
  34.  
  35. <body>
  36. <script type="text/javascript">
  37.  
  38. var _gaq = _gaq || [];
  39. _gaq.push(['_setAccount', 'UA-16632565-1']);
  40. _gaq.push(['_trackPageview']);
  41.  
  42. (function() {
  43. var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  44. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  45. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  46. })();
  47.  
  48. </script>
  49.  
  50. <div id="center">
  51. <div align="center" >
  52. <div id="navigation">
  53. <ul>
  54. <li><a href="1.html">1</a></li>
  55. <li><a href="2.html">2</a></li>
  56. <li><a href="3.html" class="current">3</a></li>
  57. <li><a href="4.html">4</a></li>
  58. <li><a href="5.html">5</a></li>
  59. <li><a href="6.html">6</a></li>
  60. <li><a href="7.html">7</a></li>
  61. </ul>
  62. </div>
  63. <div id="main">
  64. <div id="subnavigation">
  65. <p align="center"><img src="images/logo150.png" alt="" width="150" height="150" border="0" usemap="#Map" />
  66. <map name="Map" id="Map2">
  67. <area shape="rect" coords="3,3,147,147" href="index.html" />
  68. </map>
  69. </p>
  70. <ul>
  71. <li class="current"><a href="3b.html" class="current">3b</a></li>
  72. <li class="normal"><a href="3d.html">3d</a></li>
  73. <li class="normal"><a href="3e.html">3e</a></li>
  74. <li class="normal"><a href="3f.html">3f</a></li>
  75. <li class="normal"><a href="3g.html">3g</a></li>
  76. <li class="normal"><a href="3h.html">3h</a></li>
  77. <li class="normal"><a href="3i.html">3i</a></li>
  78. <li class="normal"><a href="3j.html">3j</a></li>
  79. </ul>
  80. </div>
  81. <div id="content2">
  82. <h1 class="Style3">3b</h1>
  83. <p align="justify" class="Style2"> </p>
  84. <p align="justify" class="Style2"><em>« L'<strong>identité visuelle</strong> est la représentation graphique de l'identité d'une entité : une entreprise, un objet, d'un environnement... Elle exprime grâce à un style graphique propre à l'entreprise, les valeurs, l'activité et les ambitions de celle-ci et se traduit par des signes, des couleurs, des formes, des textes ainsi que des mises en forme.»</em></p>
  85. <p class="Style2">elle vous accompagne pour définir ou redéfinir votre identité visuelle dans son ensemble et réalise pour vous :</p>
  86. <blockquote>
  87. <p class="Style2">• Logo<br>
  88. • Charte graphique<br>
  89. • Slogan</p>
  90. </blockquote>
  91. <p align="justify" class="Style2">elle vous propose également de compléter votre image.</p>
  92. <p align="center" class="Style2"><a href="devis.php">demander un devis</a></p>
  93. </div>
  94. <div class="cleaner">  </div>
  95. </div>
  96. <div id="footer">
  97. <div align="left">
  98. <blockquote>
  99. <table width="100%" border="0" class="Style7">
  100. <tr>
  101. <td width="73%" align="right" valign="middle" class="Style7"><span class="Style12">tel : 0000000000</span><br>
  102. <a href="mailto:contact.com" class="Style12">contact.com</a></td>
  103. <td width="27%" valign="top" class="Style12"><table width="100%" border="0">
  104. <tr>
  105. <td width="10%"><img src="images/facebook2.png" width="30" height="30" align="middle"></td>
  106. <td width="10%"><img src="images/linked.png" width="30" height="30"></td>
  107. <td width="10%"><img src="images/myspace.png" width="30" height="30"></td>
  108. <td width="10%"><img src="images/tweeter.png" width="30" height="30"></td>
  109. <td width="60%"><img src="images/viadeo.png" width="30" height="30"></td>
  110. </tr>
  111. </table></td>
  112. </tr>
  113. </table>
  114. </blockquote>
  115. </div>
  116. </div>
  117. <div id="footer2">
  118. <div align="left">
  119. <blockquote>
  120. <table width="100%" border="0" class="Style7">
  121. <tr>
  122. <td valign="top" class="Style7"><div align="right" class="Style5"><a href="contact.php" class="Style5">contact</a> | <a href="devis.php">demander un devis</a> | <a href="conditions_de_ventes.html">mentions légales</a> | <a href="plan_site.html">plan du site</a></div></td>
  123. </tr>
  124. </table>
  125. </blockquote>
  126. </div>
  127. </div>
  128. <p align="center"><span class="Style7"><a href="<a href="http://www.monsiteestvert.fr/engagement_ikoula#logo" rel="nofollow" target="_blank">http://www.monsiteestvert.fr/engagement_ikoula#logo</a>" target="_blank"><img src="<a href="http://www.monsiteestvert.fr/Portals/0/x-small_logo_blanc.gif" rel="nofollow" target="_blank">http://www.monsiteestvert.fr/Portals/0/x-small_logo_bla...</a>" border="0" alt="Ce site est hébergé par Ikoula, hébergeur respectueux de l'environnement et acteur du développement durable"></a></a></span> </p>
  129. </div>
  130.  
  131. </div>
  132. </div>
  133.  
  134. </body>
  135. </html>



et celui de ma page css :


  1. /* CSS Document */
  2.  
  3. body {margin:0;padding:0;}
  4.  
  5. html {
  6. margin:0;
  7. padding:0;
  8. font-family:Verdana, Arial, Helvetica, sans-serif;
  9. font-size:11px;
  10. background:url(images/font_double5.gif);
  11. background-repeat:repeat-x;
  12. background-color:#8BA233;
  13. }
  14.  
  15. ul, li {
  16. list-style:none;
  17. padding:0;
  18. margin: 0;
  19. word-spacing: normal;
  20. float: none;
  21. }
  22. li a {text-decoration:none; color:#009ee0;}
  23. h1 {font-size:19px;font-weight:normal;}
  24. img {
  25. display: block;
  26. border:none;
  27. height: auto;
  28. width: auto;
  29. top: auto;
  30. }
  31. img p {margin:0;padding:0;}
  32.  
  33. #navigation{
  34. width:755px;
  35. height:42px;
  36. margin-left: 10px;
  37. margin-right: 10px;
  38. }
  39.  
  40. #navigation ul{list-style:none;width:730px;margin:0 auto; }
  41. #navigation li{list-style:none;display:block; float:left; margin:0 3px;}
  42. #navigation li a{ display:block;float:left;color: #fff;text-transform:uppercase;font-size:11px; font-weight:bold;line-height:42px;text-decoration:none;padding:0 5px;}
  43. #navigation li a:hover{color:#0069a2; background:url(images/menu_023_h.png) no-repeat center top; }
  44. #navigation li a.current{ display:block;float:left;background:url(images/menu_023_c.png) repeat-x;color:#fff; text-transform:uppercase;font-size:11px; font-weight:bold;line-height:42px;text-decoration:none; padding:0 5px; }
  45. #navigation li a:hover.current{ color:#B0B0B0}
  46.  
  47.  
  48. #banner {background-image:url(images/banner.gif);background-position: 7px 5px;width:756px;height:110px;background-repeat:no-repeat;}
  49.  
  50. #center {
  51. background-image:url(images/fenetre_font.png);
  52. width:775px;
  53. margin-left:auto;
  54. margin-right:auto;
  55. height: 500px;
  56. margin-top: 20px;
  57. }
  58.  
  59. .active {;width:185px;padding:0;margin:0;}
  60. .current {font-weight:bold;}
  61. .normal {background-image:url(images/border2.gif);background-repeat:no-repeat;padding:0;margin:0;}
  62. .normal2 {padding:0;margin:0;}
  63.  
  64.  
  65. #subnavigation {
  66. float:left;
  67. text-decoration: none;
  68. font-weight:bold;
  69. margin-left: 5px;
  70. }
  71. #subnavigation ul li {margin-left:0px;padding-top:9px;padding-bottom:7px; }
  72. #subnavigation ul li a {padding-left:25px; }
  73. #subnavigation li a:link { color:#fff} /* lien non-visité */
  74. #subnavigation li a:visited { color: #fff;} /* lien visité */
  75. #subnavigation li a:hover { color: #d7852e; } /* lien survolé */
  76. #subnavigation li a.current { color: #a55b24; } /* lien actif */
  77. #subnavigation li a:active { color: #a55b24;} /* lien activé */
  78.  
  79. #content {
  80. background-repeat:repeat-y;
  81. float:left;
  82. width:270px;
  83. margin-left:5px;
  84. padding-left:24px;
  85. line-height:16px;
  86. margin-top:12px;
  87. padding-bottom:45px;
  88. }
  89. #content2 {
  90. background-repeat:repeat-y;
  91. float:left;
  92. width:590px;
  93. margin-left:10px;
  94. padding-left:10px;
  95. line-height:16px;
  96. margin-top:12px;
  97. padding-bottom:45px;
  98. height: 350px;
  99. overflow: auto;
  100. }
  101. #content2 a:link { color:#58595b;} /* lien non-visité */
  102. #content2 a:visited { color: #58595b;} /* lien visité */
  103. #content2 a:hover { color: #bcbcbc;} /* lien survolé */
  104. #content2 a:active { color: #666666;} /* lien activé */
  105.  
  106. #footer {
  107. font-size:5px;
  108. text-align:center;
  109. text-decoration:none;
  110. font-weight:bold;
  111. color: #009ee0;
  112. background-position:top;
  113. }
  114. #footer a {
  115. color:#a64c21;
  116. }
  117.  
  118. .float-left {
  119. float:left;
  120. width:auto;
  121. padding-right:10px;
  122. margin:0;
  123. }
  124. .float-none {clear:left;display:block;}
  125.  
  126. .cleaner
  127. {
  128. clear:both;
  129. height:1px;
  130. Font-size:1px;
  131. border:0px none;
  132. margin:0;padding:0;
  133. background:transparent;
  134. }
  135. #footer2 {
  136. font-size:5px;
  137. text-align:center;
  138. font-weight:bold;
  139. color: #009ee0;
  140. background-position:top;
  141. }
  142.  
  143. .float-left {
  144. float:left;
  145. width:auto;
  146. padding-top: 0px;
  147. padding-right:10px;
  148. margin:0;
  149. }
  150. .float-none {clear:left;display:block;}
  151.  
  152.  
  153. .cleaner
  154. {
  155. clear:both;
  156. height:1px;
  157. Font-size:1px;
  158. border:0px none;
  159. margin:0;padding:0;
  160. background:transparent;
  161. }
  162. #footer2 a:link { color:#a55b24;} /* lien non-visité */
  163. #footer2 a:visited { color: #a55b24;} /* lien visité */
  164. #footer2 a:hover { color: #bf7f30;} /* lien survolé */
  165. #footer2 a:active { color: #d7852e;} /* lien activé */


Si quelqu'un peut me donner un coup de main...
Merci.

Autres pages sur : probleme affichage site internet explorer

19 Juillet 2010 14:19:24

je suis arrivée à bidouiller pour centrer la page mais j'ai toujours le problème de l'image du cadre dupliqué et mal centrée.
Si quelqu'un pense avoir une solution...
m
0
l
19 Juillet 2010 14:48:05

bon, je suis chiante : problème résolu ! mais j'ai maintenant un problème avec mon pieds de page qui ne se place pas correctement alors que ça rend très bien sous Firefox.
Il est sensé ce placer parfaitement par rapport à une image cadre placé en fond.
m
0
l
Contenus similaires
a c 232 L Programmation
19 Juillet 2010 19:15:43

Salut,

Tu aurais un lien vers ton site web que l'on voit ce que ça donne, c'est plus simple pour éditer en live.
m
0
l
20 Juillet 2010 09:56:26

bon, je suis arrivée à régler mes problèmes : % au lieu de valeurs fixes, text-align pour centrer les tableaux, et j'ai intégré un code redirigeant vers 2 css différents pour ie et les autres navigateurs : <!--[if IE]><link type="text/css" rel="stylesheet" href="ie.css" /><![endif]--> aprés le <head>.
m
0
l
20 Juillet 2010 10:00:56

problèmes résolut
m
0
l
5 Août 2010 13:45:20

Bonjour,

J'ai le même probleme que vous le site internet que je viens de créer est bien centre avec firefox, mais avec ie tout le site est sur la gauche.
Apparement vous êtes arrivées à vous en sortir mais vous ne donnez pas la solution.

Pourriez vous me renseigner sur la solution ?

J'utilise nvu pour la création de mon site,

Cordialement,

JP
m
0
l
a c 232 L Programmation
5 Août 2010 14:14:39

Salut,

Je vais répéter ce que j'ai dit plus haut...
Tu aurais un lien vers ton site web que l'on voit ce que ça donne ? On pourra alors te guider
m
0
l
6 Août 2010 14:58:06

Bonjour,

Merci tout d'abord d'avoir répondu à ma question.

Je n'ai aucune connaissance dans le langage html, aussi j'ai utilisé le logiciel nvu pour créer mon site.

J'ai centré les cellules, et lorsque je visite le site avec Firefox le site se trouve au milieu de la page mais lorsque j'utilise Internet Explorer le site est sur la gauche, je ne comprends pas ?

L'adresse du site est la suivante www.addmarmande.com

Par avance merci.

JPaul.
m
0
l
a c 232 L Programmation
6 Août 2010 15:01:41

Salut,

Ajoute simplement un style="text-align:center;" (ou ajoute text-align:center; si l'attribut style existe déjà) à l'élément <body>
m
0
l
7 Août 2010 09:12:24

Bonjour,

Je vous remercie pour vos réponses, j'ai pu enfin centrer mon site sur Internet explorer,

Un grand merci,

JPaul
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS