pb de positionnement de div avec IE7

pb de positionnement de div avec IE7 - HTML/CSS - Programmation

Marsh Posté le 24-06-2011 à 18:40:32    

Bonjour à tous.
 
Il doit s'agir de mon premier post ici et j'espère ne pas me tromper d'endroit...
Passionné de mesures météo, j'ai un site qui est actualisé toutes les 5min, 24h/24 et 7j/7.
Les visiteurs utilisent de IE6 à IE9, FF, Chrome et Safari pour plus de 99%. (j'utilise Piwick qui me donne ces renseignements)
J'essaye donc de faire en sorte que mon site soit lisible dans tous les navigateurs mais j'ai un problème avec IE7.
Alors que tout est OK (ou presque !) avec les autres voici ce que j'obtiens dans IE7 :
 
http://meteo-plouguerneau.servhome.org/pb_ie7.jpg
 
Le bandeau bleu foncé est décalé vers la droite, l'image satellite n'est pas centrée, la vignette Météo-France n'est pas centrée...
Un autre problème semblable en bas de la même page...
 
Voici la partie concernée du code (soyez indulgent, je suis loin d'être un pro !)  :

Code :
  1. <div style="margin: 0.5in auto; margin-top: -25px; width: 900px;">
  3. <!--div sat24-->
  4. <div style="margin-left: 0px; margin-top: 0px; width: 649px; height: 37px; z-index: 186; overflow: visible;" class= "bandeau_autres">
  5. <span>Image satellite, réactualisée toutes les 15 minutes en journée, provient de <a style="color: white; text-decoration: underline" href="http://www.sat24.com/" target="_blank">sat24.com</a><br>
  6. <a style="color: white; text-decoration: underline" href='javascript:fenetreCent("carte_france_sat24.html","sat24_france",1040,850,"menubar=no,scrollbars=yes,statusbar=no" )'>Voir l'animation France</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  7. <a style="color: white; text-decoration: underline" href='javascript:fenetreCent("carte_europe_sat24.html","sat24",1040,850,"menubar=no,scrollbars=yes,statusbar=no" )'>Voir l'animation Europe</a></span></div>
  8. <div style="margin-left: 0px; margin-top: 0px; width: 643px; height: 487px; z-index: 192; overflow: visible;" class="box_2">
  9. <div id="image_sat24" style="width: 623px; z-index: 191; overflow: visible; margin-top: 0px; height: 467px;" ><img style="width: 623px; height: 467px;" alt="" src="http://www.sat24.com/images.php?country=fr" hspace="10" vspace="10"> </div>
  10. </div>
  12. <!--div MF et marees-->
  13. <div style="margin-left: 668px; margin-top: -583px; -margin-top: -586px; width: 226px; height: 529px; padding: 0px; z-index: 180; overflow: visible;" class="box_4_900">
  15. <!--div MF-->
  16. <div id="obj_3103" style="margin-left: 38px; -margin-right: 38px; top: 13px; width: 150px; z-index: 189; overflow: visible; margin-top: 10px; height: 274px;">
  17. <iframe src='mf.html' frameborder='0' marginwidth='0' marginheight='0' border='0' width='150px' height='290px' scrolling='no'></iframe></div><br>
  19. <!--div marees-->
  20. <div id="obj_3104" style="margin-left: 0px; margin-top: 0px; -margin-top: -10px; width: 226px; height: 217px;  -height: 227px; z-index: 190; overflow: visible;">
  21. <iframe src="http://horloge.maree.frbateaux.net/ws74" frameborder="0" height="217" scrolling="no" width="226">Calendrier des
  22. mareacute;es
  23. -
  24. horaire,
  25. hauteur et
  26. coefficient
  27. de
  28. mareacute;es</iframe>
  29. </div>
  30. </div>
  31. </div>


 
Et le css concerné :
 

Code :
  1. .bandeau_39 {
  2. margin: 0.5in auto;
  3. color: #fff;
  4. padding-top: 6px;
  5. padding-bottom: 8px;
  6. padding-left: 10px;
  7. padding-right: 10px;
  8. text-align: center;
  9. background-color: #3f557a;
  11. /* Do rounding (native in Firefox and Safari) */
  12. -webkit-border-top-left-radius: 10px;
  13. -webkit-border-top-right-radius: 10px;
  14. -moz-border-radius-topleft: 10px;
  15. -moz-border-radius-topright: 10px;
  16. }
  18. .box_2 {
  19. margin: 0.5in auto;
  20. color: #000;
  21. text-align: center;
  22. background-color: #e6edf7;
  23. border: 3px solid #3f557a;
  24. /* Do rounding (native in Firefox and Safari) */
  25. -webkit-border-bottom-left-radius: 10px;
  26. -webkit-border-bottom-right-radius: 10px;
  27. -moz-border-radius-bottomleft: 10px;
  28. -moz-border-radius-bottomright: 10px;
  29. }
  31. .boxes_int_console {
  32. background-color: #04306c;
  33. text-align: center;
  34. color: black;
  35. -webkit-border-radius: 10px;
  36. -moz-border-radius: 10px;
  37. }
  39. .bandeau_autres {
  40. text-align: center;
  41. background-color: #3f557a;
  42. padding-top: 5px;
  43. font-family: Arial;
  44. font-size: 13px;
  45. font-weight: bold;
  46. color: white;
  48. -webkit-border-top-left-radius: 10px;
  49. -webkit-border-top-right-radius: 10px;
  50. -moz-border-radius-topleft: 10px;
  51. -moz-border-radius-topright: 10px;
  52. }


 
Pour IE6, j'avais trouvé des "hacks", mais rien pour IE7 !!!
Si vous pouviez m'aider, ce serait sympa.
Merci à tous.


---------------
http://meteo-plouguerneau.fr
Reply

Marsh Posté le 24-06-2011 à 18:40:32   

Reply

Marsh Posté le 25-06-2011 à 19:02:40    

A regarder la CSS + HTML avec CSS à l'intérieur, ton site est une soupe de bricolage du dimanche. Au mieux tu peux faire un hack à la con du genre :  
*margin-left:-XXpx pour résoudre le problème mais ça restera dégueulasse.
 
Au mieux je te conseille de reprendre ton layout de 0, car je vois des marges négatives avec des valeurs bricolées, des propriétés CSS dans tous les sens, etc, etc. Donc cela ne m'étonne même pas que ça pète dans tous les sens.


---------------
Blablaté par Harko
Reply

Marsh Posté le 25-06-2011 à 22:44:24    

Ok, c'est du bricolage du dimanche mais je n'ai jamais eu l'occasion d'apprendre ! (j'ai 62 balais tout de même !)
Ceci dit, si tu as lu mon post, ça ne pète pas dans tous les sens mais seulement un petit problème sur ma page d'accueil et uniquement avec IE7 !!!
Je n'appelle pas ça péter dans tous les sens !!!
As tu seulement jeté un œil sur mon site ? il y avait un lien dans mon post, je le remets ici plus clairement :
meteo-plouguerneau.fr

Message cité 1 fois

---------------
http://meteo-plouguerneau.fr
Reply

Marsh Posté le 25-06-2011 à 23:51:06    

tudgur a écrit :

Ok, c'est du bricolage du dimanche mais je n'ai jamais eu l'occasion d'apprendre ! (j'ai 62 balais tout de même !)
Ceci dit, si tu as lu mon post, ça ne pète pas dans tous les sens mais seulement un petit problème sur ma page d'accueil et uniquement avec IE7 !!!
Je n'appelle pas ça péter dans tous les sens !!!
As tu seulement jeté un œil sur mon site ? il y avait un lien dans mon post, je le remets ici plus clairement :
meteo-plouguerneau.fr


On va dire que il y avait moyen de se prendre 100x moins la tête en reprenant ton site proprement que de la manière que tu l'as fait. Mais le problème n'est pas là.
Pour corriger simplement sous ie7 tu peux rajouter une propriété css en utilisan un hack css rien que pour ie7
J'i mis le code plus haut
Il suffit de mettre *margin-left:-80px ou tu mets la valeur qu'il faut.


---------------
Blablaté par Harko
Reply

Marsh Posté le 26-06-2011 à 14:09:45    

Salut,
 
Le *margin-left:-XXpx ne change strictement rien.
J'y suis arrivé avec position:absolute...
Il me reste à régler un problème de positionnement de quelques div en hauteur, mais uniquement avec IE7.
Sinon, c'est bon sous IE6, IE8, et IE9.
Comme je n'ai pas de PC avec IE6, j'ai installé IETester...


---------------
http://meteo-plouguerneau.fr
Reply

Marsh Posté le 11-07-2011 à 23:23:21    

je serais toi, je ne me prendrais pas trop la tête à hacker les css pour ie7, il ne représente plus que 1% des navigateurs mondiaux d'après http://www.w3schools.com et microsoft propose l'update vers ie8 et 9 à  tous ses clients.
Vérifie le html et les css sur le site du w3c http://validator.w3.org/ ça t'aidera à partir d'une base saine.
bon débogage !

Reply

Sujets relatifs:

Leave a Replay

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