[Résolus] 2 petits bugs sous IE7

2 petits bugs sous IE7 [Résolus] - HTML/CSS - Programmation

Marsh Posté le 12-07-2010 à 12:56:06    

Salut à vous.
 
 
Je reviens avec mes 2 petits bugs sous IE7.  
J'ai épuré mes pages et donc mes codes, pour simplifier et isoler les problèmes :
Ca devrait être plus simple :o
 
1. Ici, ma petite deco (le liseré qui fait toute la largeur) est bien sous Firefox, mais decalée sous IE7 :
http://tinyurl.com/326xsm5
 
2. Là c'est ma margin haute qui disparaît sous IE7, alors que sous Firefox aucun problème :
http://tinyurl.com/37wxbmn
 
 
Voici mes codes intégralement :o :
 
 
------------------------------
 
1. http://tinyurl.com/326xsm5
 
CSS :

Code :
  1. @charset "utf-8";
  2. body  {
  3. font: 100% Verdana, Arial, Helvetica, sans-serif;
  4. background-image:url(../images/fond_01.gif);
  5. background-repeat:repeat;
  6. margin: 0; /* pour tenir compte des différentes valeurs par défaut des navigateurs */
  7. padding: 0;
  8. text-align: center; /* ce paramétrage centre le conteneur dans les navigateurs IE 5.x. */
  9. color: #000000;
  10. }
  12. #decoration  {
  13. position:absolute;
  14. top:150px;
  15. width:100%;
  16. height:50px;
  17. background-image:url(../images/fond_deco_01.png);
  18. background-repeat: repeat-x;
  19. }


HTML :

Code :
  1. <body>
  2. <div id="decoration"><!-- fin de #decoration-fond --></div> 
  3. </body>
  4. </html>


 
-------------------------
 
2.
http://tinyurl.com/37wxbmn
 
CSS :

Code :
  1. @charset "utf-8";
  2. body  {
  3. font: 100% Verdana, Arial, Helvetica, sans-serif;
  4. background-image:url(../images/fond_01.gif);
  5. background-repeat:repeat;
  6. margin: 0; /* tenir compte des différentes valeurs par défaut des navigateurs */
  7. padding: 0;
  8. text-align: center; /* ce paramétrage centre le conteneur dans les navigateurs IE 5.x. */
  9. color: #000000;
  10. }
  12. #decoration  {
  13. position:absolute;
  14. top:150px;
  15. width:100%;
  16. height:50px;
  17. background-image:url(../images/fond_deco_01.png);
  18. background-repeat: repeat-x;
  19. }
  21. #conteneur1 {
  22. position:relative;
  23. width: 900px;
  24. background-color:#000;
  25. height: 550px;
  26. margin: 20px auto 20px auto;
  27. text-align: left; /* annule le paramètre text-align: center de body. */
  28. }

 
HTML :

Code :
  1. <body>
  2. <div id="decoration">
  3. <!-- fin de #decoration-fond --></div>
  4. <div id="conteneur1">           
  5. <!-- fin de #conteneur1 --></div> 
  6. </body>
  7. </html>


 
Merci de votre coup de main :jap:


Message édité par toum_toum le 13-07-2010 à 17:28:12

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 12-07-2010 à 12:56:06   

Reply

Marsh Posté le 12-07-2010 à 23:26:42    


Non ? Personne pour un debut de piste ? Ca doit être 2 trucs tout c... mais...


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 13-07-2010 à 15:39:46    

Pour le premier, tu peux essayer d'ajouter un left:0px; à #decoration
Pour le deuxième, essaye de centrer avec :
left:50%;
margin-left:-450px;
 
plutôt que margin auto

Reply

Marsh Posté le 13-07-2010 à 15:49:44    

Wesh
 
Ho j'me suis fait doubler! Etant loin d'etre un pro de CSS les deux me laissent perplexe et ya surement un truc tout con comme tu dis... En attendant y'a des trucs pour contourner.
Pour le premier, pareil que paulp, un left:0px; résout le truc.
Pour le second, j'ai pas mieux que de passer margin de #conteneur1 à '0 auto 20px' et de rajouter un top:20px;


---------------
C'était vraiment très intéressant.
Reply

Marsh Posté le 13-07-2010 à 16:39:04    


Hello et merci de votre coup de main.
 
J'ai du nouveau pour le n°2 car il est strictement lié au bug1 (l'élément deco).
Si pas de déco, pas de bug sur les margin pour mon bloc en noir.
Donc bug 2 résolu.
 
Reste ce foutu petit élement de déco qui ne passe pas bien. Je lis vos réponses :o


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 13-07-2010 à 16:44:17    


Yes, merci les gars, ça marche :)
 
Je me demande comment je n'y ai pas pensé, mais j'étais obnubilé par vouloir "corriger une erreur" qq part, que je n'ai pas pensé à contourner...
 
Merci :jap:


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 13-07-2010 à 16:48:26    

Alors par contre du coup évidemment, mon bug2 reste présent (lié à qq chose qui ne lui plait pas dans mon "decoration" )
 
Une remarque : mon margin disparait en haut, mais aussi en bas.
Je vais tenter vos solutions,  notamment celle de lasnoufle dans un premier temps...
 
 
 
Edit : ceci dit je pense que le probleme vient de ça (si jamais ca peut vous éclairer sur le pb) :
 
#conteneur1 {
position:relative;  <- obligé de créé ce positionnement qu'au départ je n'avais pas, à cause de la présence de :
 
#decoration  {
position:absolute;  <- ...
 
 
Edit2 : bon et bien ça roule.  
J'ai pris la solution de lasnoufle et j'ai aussi ajouté un bottom : 20px;
(+ le #conteneur1 à '0 auto 0 auto' )
 
Edit 3 : Ah, ai parlé un peu trop vite, mon  "bottom : 20px;" ne donne pas l'effet voulu (pas de "decollage" du bas de 20 px)
 
Edit 4 : j'ai remplacé le "bottom" par un "padding-bottom: 20px ;" et cette fois-ci, ca marche (IE et FF)
 
 
Merci à vous deux :)  


Message édité par toum_toum le 13-07-2010 à 17:27:53

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Sujets relatifs:

Leave a Replay

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