Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3059 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  pb de positionnement de div avec IE7

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

pb de positionnement de div avec IE7

n°2084780
tudgur
Posté le 24-06-2011 à 18:40:32  profilanswer
 

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
mood
Publicité
Posté le 24-06-2011 à 18:40:32  profilanswer
 

n°2084896
gatsu35
Blablaté par Harko
Posté le 25-06-2011 à 19:02:40  profilanswer
 

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
n°2084925
tudgur
Posté le 25-06-2011 à 22:44:24  profilanswer
 

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
n°2084931
gatsu35
Blablaté par Harko
Posté le 25-06-2011 à 23:51:06  profilanswer
 

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
n°2084970
tudgur
Posté le 26-06-2011 à 14:09:45  profilanswer
 

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
n°2088824
JHN Design
Posté le 11-07-2011 à 23:23:21  profilanswer
 

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 !


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  pb de positionnement de div avec IE7

 

Sujets relatifs
positionnementPositionnement automatique d'un bloc
Menu positionnement différent sur IE et Firefox + Problème de bordureProblème(s) positionnement div
Problème de positionnement image dans zoneCentrer DIV dans la fenetre (Chrome-FF : OK .:. IE7 : NOK)
[SSRS] Positionnement dans champ dans ReportProblème IE7
Animation Flash ne fonctionne pas sous IE7Pb de positionnement de div avec IE6-IE7
Plus de sujets relatifs à : pb de positionnement de div avec IE7

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.075 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)