Probleme IE

Probleme IE - HTML/CSS - Programmation

Marsh Posté le 29-05-2009 à 11:38:21    

Bonjour à tous!
 
J'ai un problème sur mon site avec l'alignement d'un cadre sous Internet Explorer car cela fonctionne parfaitement sous firefox...   Ce qui est tres embettant vu la quantité de gens sur IE.
Donc je suppose qu'il y a une erreur dans mon code si quelqu'un peut m'aider à la reperer ça serait super.
 
site:  http://bilooba.javabien.fr              (site de test)
 
En vous remerciant d'avance

Reply

Marsh Posté le 29-05-2009 à 11:38:21   

Reply

Marsh Posté le 29-05-2009 à 11:53:14    

ah oui juste pour dire que en local quand je fait apercu dans IE ou un autre tout marche très bien, il n'y a pas de problème d'alignement.
 
Cela se produit uniquement quand il est en ligne. Ce pourrait t-il que ça vienne de l'hebergeur?

Reply

Marsh Posté le 29-05-2009 à 11:54:07    

Je n'ai pas été voir le site, mais je suppose que ce serait le problème habituel des marges. Il faut les définir explicitement au niveau du body, sinon le navigateur prend des valeurs par défauts qui ne sont pas tout à fait les mêmes selon les navigateurs. Donc, avoir :

body {  
  margin: 0;
  padding: 0;  
}

Reply

Marsh Posté le 29-05-2009 à 11:59:57    

La on parle du fichier css?  Car si oui c'est en effet les valeur que j'avais.
Je poste mon fichier css pour y voir plus clair.
 

Code :
  1. #free-flash-header a, #free-flash-header a:hover {
  2. color : #c2cae0;
  3. }
  4. #free-flash-header a:hover {
  5. text-decoration : none;
  6. }
  7. body {
  8. margin : 0 0;
  9. padding : 0;
  10. background : #ffffff;
  11. font : normal 11px Arial, helvetica, sans-serif;
  12. color : #31333b;
  13. }
  14. #header {
  15. width : 850px;
  16. height : 200px;
  17. margin-left : auto;
  18. margin-right : auto;
  19. }
  20. #menu {
  21. width : 850px;
  22. height : 45px;
  23. margin : 0 auto;
  24. background : #8fa819;
  25. }
  26. #menu ul {
  27. margin : 0;
  28. padding : 0 0 0 0;
  29. list-style : none;
  30. }
  31. #menu li {
  32. display : inline;
  33. }
  34. #menu a {
  35. display : block;
  36. float : left;
  37. margin-left : 20px;
  38. height : 25px;
  39. padding : 15px 10px 0 10px;
  40. border-bottom : 4px solid #330010;
  41. text-decoration : none;
  42. text-transform : uppercase;
  43. font-size : 12px;
  44. font-weight : bold;
  45. color : #ffffff;
  46. border-bottom-color : #ffcd04;
  47. }
  48. #menu a:hover {
  49. border-bottom-color : #ffcd04;
  50. background : #ffcd04;
  51. }
  52. #menu .active a {
  53. border-bottom-color : #ffcd04;
  54. background : #ffcd04;
  55. }
  56. #content {
  57. width : 850px;
  58. margin : 0 auto;
  59. border-top : 1px solid #ffffff;
  60. border-bottom : 1px solid #ffffff;
  61. text-align : justify;
  62. }
  63. #right {
  64. width : 540px;
  65. padding : 0;
  66. margin-left : 20px;
  67. float : right;
  68. }
  69. #left {
  70. width : 250px;
  71. margin : 0 auto;
  72. float : left;
  73. padding : 20px;
  74. padding-top : 0;
  75. }
  76. #footer {
  77. width : 850px;
  78. margin : 0 auto;
  79. padding : 3px 0;
  80. height : 50px;
  81. border-top : 2px solid #ffffff;
  82. background : #8fa819;
  83. }
  84. #footer p {
  85. margin : 0;
  86. padding-top : 15px;
  87. text-align : center;
  88. font-size : 11px;
  89. color : #ffffff;
  90. }
  91. #footer a {
  92. color : #ffffff;
  93. }
  94. #footer a:hover {
  95. color : #ffffff;
  96. }
  97. h1, h2 {
  98. color : #8fa819;
  99. font-family : "Trebuchet MS", arial, helvetica, sans-serif;
  100. font-weight : bold;
  101. font-size : 15px;
  102. padding-left : 12px;
  103. background : url(images/arrow.gif) no-repeat left center;
  104. text-transform : uppercase;
  105. }
  106. .blue {
  107. color : #3f71b6;
  108. font-weight : 800;
  109. }
  110. .bluesquare {
  111. color : #3f71b6;
  112. font-weight : 800;
  113. padding-left : 12px;
  114. background : url(images/square.gif) no-repeat left center;
  115. }
  116. a {
  117. color : #3f71b6;
  118. }
  119. a:hover {
  120. color : #3f71b6;
  121. text-decoration : none;
  122. }
  123. hr {
  124. width : 100%;
  125. height : 1px;
  126. color : #8fa819;
  127. background-color : #8fa819;
  128. }
  129. #holder {
  130. position : absolute;
  131. top : 0;
  132. left : 0;
  133. }
  134. #copy {
  135. clear : both;
  136. }
  137. html, body, #holder {
  138. height : 100%;
  139. width : 100%;
  140. height : 100%;
  141. }
  142. html > body, html > body #holder {
  143. height : auto;
  144. }
  145. #free-flash-header a:hover {
  146. color : #cdd2d7;
  147. text-decoration : none;
  148. }
  149. #resol {
  150. text-align : left;
  151. font-family : Verdana, Arial, Helvetica, sans-serif;
  152. position : fixed;
  153. padding-left : 10px;
  154. width : 290px;
  155. top : 0;
  156. left : 1280px;
  157. margin : 0 auto;
  158. background : #bfc6d9;
  159. }
  160. #resol h1 {
  161. background : none;
  162. font-size : 1.2em;
  163. letter-spacing : 10px;
  164. padding : 0;
  165. margin : 0;
  166. border : 0;
  167. }
  168. #resol h2 {
  169. font-size : 0.6em;
  170. letter-spacing : 3px;
  171. padding : 0;
  172. margin : 0;
  173. background : none;
  174. }
  175. #holder #content #right p {
  176. text-align : center;
  177. }


Message édité par zebus85 le 29-05-2009 à 12:01:37
Reply

Marsh Posté le 29-05-2009 à 12:11:41    

Apres avoir fait des vérifications il me dit que j'ai une erreur sur cette ligne:
 

Code :
  1. #resol {text-align:left;font-family:Verdana, Arial, Helvetica, sans-serif;position:fixed;padding-left:10px;width:290px;top:0px;left:1280px;margin:0 auto;background:#bfc6d9;} #resol h1 {background:none;font-size:1.2em;letter-spacing:10px;padding:0px;margin:0px;border: 0px;} #resol h2 {font-size:0.6em;letter-spacing:3px;padding:0px;margin:0px;background:none;}


 
Notemment le fixed qui n'est pas pris en charge mais ça na peut être aucun rapport.


Message édité par zebus85 le 29-05-2009 à 12:12:37
Reply

Marsh Posté le 29-05-2009 à 12:28:30    

Peut-être qu'il faudrait mettre absolute à la place de fixed.

Reply

Marsh Posté le 29-05-2009 à 12:33:02    

En effet une fois absolute mis je n'ai pu de probleme dans ma vérification de la page mais malheureusement ça ne resout pas mon probleme d'alignement.  Pfff c'est abusé je suis sur que c'est un truc tout bête ...  Bloqué sur ça ça me fait perdre trop de temps...  
 
m'enfin merci de m'aider :)


Message édité par zebus85 le 29-05-2009 à 12:33:24
Reply

Marsh Posté le 29-05-2009 à 13:41:41    

yessss   j'ai réussi voilà ce que j'ai fait:
 
a la base j'ai ça :
 

Code :
  1. # #right {
  2. # width : 540px;
  3. # padding : 0;
  4. # margin-left : 20px;
  5. # float : right;
  6. # }
  7. # #left {
  8. # width : 250px;
  9. # margin : 0 auto;
  10. # float : left;
  11. # padding : 20px;
  12. # padding-top : 0;


 
en remarquant que ça correspond à mes 2 cadres je me dit qu'ils doivent être identiques dans leur code à la difference de la gauche et droite donc je modifie le margin-left : 20px; en margin : 0 auto;
le résultat est impécable :)
 
merci quand même pour l'aide ;)


Message édité par zebus85 le 29-05-2009 à 13:43:46
Reply

Marsh Posté le 05-10-2009 à 11:33:41    

Merci de considérer l'initiative d'information autour de IE. Ca devient de plus en plus fatiguant de travailler avec IE (surtout IE6) et un petit warning n'a jamais fait de mal à personne ;-)
 
http://ieai.pieroxy.net


Message édité par pieroxy le 05-10-2009 à 21:05:36
Reply

Marsh Posté le 20-10-2009 à 03:43:30    

salut, la meilleur solution c est update pour la derniere version de IE sinon google chrome et firfefox pour moi IE c est nulllllll
Publicité effacée par Elmoricq


Message édité par Elmoricq le 20-10-2009 à 07:56:57
Reply

Marsh Posté le 20-10-2009 à 03:43:30   

Reply

Marsh Posté le 20-10-2009 à 07:59:00    

http://www.izipik.com/images/200910/20/j0dnjnifajxjks55rm-banned.gif

Reply

Sujets relatifs:

Leave a Replay

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