Se connecter / S'enregistrer
Votre question

Explorer et Firefox

Tags :
  • Arrière plan
  • Programmation
Dernière réponse : dans Programmation
21 Octobre 2007 19:56:41

Bonsoir,

Je sais que c'est mon deuxième topics ce soir, mais promis le dernier.

Vu que je ne travail que sur firefox, lorsque je me suis dit tiens je vais voir ce que ça donne sous ce explorer, j'ai failli tombé de ma chaise [biggol]

Et je ne suis pas très fort en résolution de bug entre navigateur, enfin au lieu d'utiliser les mots, je préfère vous montrer :

Sous Firefox (aucun bug) :


Sous Explorer (décalage entre l'image et son reflet) :


Donc comme vous pouvez le voir, j'ai deux image collées. Par exemple une "liens" et une autre "liens_reflets" mais voila sous FF tout es bien collé mais sous IE ca se décalle...

Voici mon CSS :

  1. body
  2. {
  3. width: 800px; /* Largeur de notre Site */
  4. margin:auto; /* Centrer notre Site */
  5. margin-top: 1.5%; /* Pour éviter de coller avec le haut de la fenêtre du navigateur */
  6. margin-bottom: 1.5%; /* Idem pour le bas du navigateur */
  7. background-color:#000000;
  8. background-repeat:no-repeat;
  9. }
  10.  
  11. #corps
  12. {
  13. width: 800px;
  14. height: 581px;
  15. float:left;
  16. margin-right:10px;
  17. background-image: url("images/fond.png");
  18. background-repeat: no-repeat;
  19. }
  20.  
  21. #acceuil_texte
  22. {
  23. width: 500px;
  24. height: 193px;
  25. float:left;
  26. margin-top:80px;
  27. margin-left:150px;
  28. background-repeat: no-repeat;
  29. }
  30.  
  31. #acceuil_logo
  32. {
  33. width: 35px;
  34. height: 36px;
  35. float:right;
  36. margin-top:83px;
  37. margin-right:125px;
  38. background-repeat: no-repeat;
  39. }
  40.  
  41. #photographies
  42. {
  43. width: 158px;
  44. height: 30px;
  45. float:left;
  46. margin-top:100px;
  47. margin-left:172px;
  48. background-repeat: no-repeat;
  49. }
  50.  
  51. #photographies_reflet
  52. {
  53. width: 158px;
  54. height: 23px;
  55. background-repeat: no-repeat;
  56. }
  57.  
  58. #images
  59. {
  60. width: 80px;
  61. height: 29px;
  62. float:left;
  63. margin-top:101px;
  64. margin-left:80px;
  65. background-repeat: no-repeat;
  66. }
  67.  
  68. #images_reflet
  69. {
  70. width: 80px;
  71. height: 23px;
  72. background-repeat: no-repeat;
  73. }
  74.  
  75. #liens
  76. {
  77. width: 58px;
  78. height: 32px;
  79. float:left;
  80. margin-top:98px;
  81. margin-left:75px;
  82. background-repeat: no-repeat;
  83. }
  84.  
  85. #liens_reflet
  86. {
  87. width: 58px;
  88. height: 23px;
  89. background-repeat: no-repeat;
  90. }


Et voici mon code HTML :

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <meta name="Author" lang="fr" content="Seb"/>
  6. <meta name="Description" content="Seb's Portfolio: Mes créations, mes photos, mes liens..."/>
  7. <meta name="Identifier-URL" content=" http://www.xxxx.free.fr"/>
  8. <meta name="Copyright" content="COPYRIGHT Seb's Portfolio 2007-2008 "/>
  9. <meta name="Keywords" content="Portfolio, Seb's Portfolio, sebastien richard"/>
  10. <meta http-equiv="content-language" content="french" />
  11.  
  12. <link rel="shortcut icon" type="image/gif" href="images/favicon.gif" />
  13. <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
  14.  
  15.  
  16. <title>Seb's Portfolio</title>
  17. </head>
  18. <body>
  19.  
  20. <div id="corps">
  21.  
  22. <div id="photographies">
  23. <a href="http://www.cder-immo/photographies"><img src="images/photographies.png" alt="Photographies" style="border:none" /></a>
  24.  
  25.  
  26. <div id="photographies_reflet">
  27. <img src="images/photographies_reflet.png" />
  28. </div>
  29. </div>
  30.  
  31. <div id="images">
  32. <a href="http://www.cder-immo/images"><img src="images/images.png" alt="Images" style="border:none" /></a>
  33. <div id="images_reflet">
  34. <img src="images/images_reflet.png"/>
  35. </div>
  36. </div>
  37.  
  38. <div id="liens">
  39. <a href="http://www.cder-immo/liens"><img src="images/liens.png" alt="Liens" style="border:none" /></a>
  40. <div id="liens_reflet">
  41. <img src="images/liens_reflet.png" />
  42. </div>
  43. </div>
  44.  
  45. <div id="acceuil_texte">
  46. <img src="images/texte_acceuil.png"/>
  47. </div>
  48.  
  49.  
  50. <div id="acceuil_logo">
  51. <a href="http://iut.univ-mlv.fr/ "target="_blank"><img src="images/logo.png" alt="IUT" title="IUT de Marne la Valée" style="border:none" /> </a>
  52. </div>
  53.  
  54. </div>
  55.  
  56.  
  57.  
  58. </body>
  59.  
  60. </html>


Encore merci de votre aide et de votre patience [smile]

Autres pages sur : explorer firefox

a c 232 L Programmation
22 Octobre 2007 18:04:43

Salut,

Tous les navigateurs ont des marges et des padding différentes.
Généralement, lorsque l'on commence un site, si on ne veut pas avoir de problème d'espaces qui sont différents suivants les navigateurs, on utilise :
  1. * { margin:0; padding:0; }
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