Votre question

Problème d'affichage Firefox

Tags :
  • Firefox
  • Html
  • Programmation
Dernière réponse : dans Programmation
20 Juillet 2012 11:04:25

Bonjour à tous,
Je post ici car je suis un petit peu désespéré...
Je vous explique mon problème.
J'ai du modifier une page HTML pour fractionner une cellule d'un tableau en 2 colonnes pour insérer texte et image. Seulement voilà, sous Dreamweaver la mise en page est parfaite, la page fonctionne correctement sous Chrome, Safari, mais est "décalée" sous Firefox (Voir screenshots plus bas)

Le site qui marche :


La page sous Firefox... :



Le code de la page (avec le CSS dans la page)

  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=utf-8" />
  5. <title>Coupons Malins : Le Magazine</title>
  6. <style type="text/css">
  7. <!--
  8. body {
  9. margin-top: 0px;
  10. background-image: url(images/mosa-fond.gif);
  11. }
  12. body,td,th {
  13. font-family: Verdana, Arial, Helvetica, sans-serif;
  14. font-size: 10px;
  15. color: #000000;
  16. font-weight: lighter;
  17. vertical-align: 0%;
  18. white-space: normal;
  19. }
  20. .style6 {
  21. font-size: 14px;
  22. font-weight: bold;
  23. color: #8F191C;
  24. }
  25. .style7 {
  26. font-size: 14px;
  27. font-weight: bold;
  28. }
  29. .style8 {
  30. color: #DE8027;
  31. font-size: 16px;
  32. }
  33. .style9 {color: #8F191C}
  34. .style10 {color: #666666}
  35. .style11 {font-size: 6px}
  36. .style15 {font-size: 12px}
  37. .style17 {font-size: 12px; font-weight: bold; }
  38. .style18 {
  39. font-size: 16px;
  40. font-weight: bold;
  41. }
  42. .style19 {
  43. font-size: 14px;
  44. font-weight: bold;
  45. }
  46. .EspacePro {
  47. color: #0D0D0D;
  48. }
  49. -->
  50. </style>
  51. <script type="text/javascript">
  52. <!--
  53. function MM_swapImgRestore() { //v3.0
  54. var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  55. }
  56. function MM_preloadImages() { //v3.0
  57. var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  58. var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  59. if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  60. }
  61.  
  62. function MM_findObj(n, d) { //v4.01
  63. var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  64. d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  65. if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  66. for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  67. if(!x && d.getElementById) x=d.getElementById(n); return x;
  68. }
  69.  
  70. function MM_swapImage() { //v3.0
  71. var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  72. if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  73. }
  74. //-->
  75. </script>
  76. </head>
  77.  
  78. <body onload="MM_preloadImages('images/bh-tel.gif','images/bh-inf.gif','images/bh-hor.gif','images/bh-jeu.gif','images/bh-arc.gif','images/bh-fra.gif','images/bh-stu.gif','images/bh-con.gif','images/bh-cou.gif','images/bh-plans.png')">
  79. <table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
  80. <tr>
  81. <td width="350" height="120" align="center" valign="middle"><img src="images/anim-logo.gif" width="350" height="120" /></td>
  82. <td height="120" colspan="2" align="center" valign="middle"><img src="images/slogan.png" width="384" height="67" /></td>
  83. </tr>
  84. <tr>
  85. <td width="350" height="110" align="center" valign="middle"><img src="images/sous-logo.gif" width="350" height="110" /></td>
  86. <td width="460" height="110" align="center" valign="middle" background="images/mosa-haut.gif"><p class="style7"><span class="style10">Vous souhaitez développer<br />
  87. NOTRE magazine dans VOTRE ville ?<br />
  88. Devenez franchisé.</span><span class="style11"><br />
  89. <br />
  90. </span><span class="style8">Contactez-nous au <span class="style9">06 88 07 50 52</span></span></p> </td>
  91. <td width="90" height="110" align="center" valign="middle"><img src="images/stars.png" width="90" height="110" /></td>
  92. </tr>
  93. </table>
  94. <table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
  95. <tr>
  96. <td height="80"><a href="index.html"><img src="images/be-mag.gif" width="90" height="80" border="0" /></a><a href="programmes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/bh-tel.gif',1)"><img src="images/bn-tel.gif" name="Image5" width="90" height="80" border="0" id="Image5" /></a><a href="coupons.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','images/bh-cou.gif',1)"><img src="images/bn-cou.gif" name="Image16" width="90" height="80" border="0" id="Image16" /></a><a href="people.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/bh-inf.gif',1)"><img src="images/bn-inf.gif" name="Image6" width="90" height="80" border="0" id="Image6" /></a><a href="horoscope.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/bh-hor.gif',1)"><img src="images/bn-hor.gif" name="Image8" width="90" height="80" border="0" id="Image8" /></a><a href="jeux.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/bh-jeu.gif',1)"><img src="images/bn-jeu.gif" name="Image9" width="90" height="80" border="0" id="Image9" /></a><a href="archives.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/bh-arc.gif',1)"><img src="images/bn-arc.gif" name="Image10" width="90" height="80" border="0" id="Image10" /></a><a href="franchises.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','images/bh-fra.gif',1)"><img src="images/bn-fra.gif" name="Image12" width="90" height="80" border="0" id="Image12" /></a><a href="studio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/bh-stu.gif',1)"><img src="images/bn-stu.gif" name="Image13" width="90" height="80" border="0" id="Image13" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/bh-con.gif',1)"><img src="images/bn-con.gif" name="Image14" width="90" height="80" border="0" id="Image14" /></a></td>
  97. </tr>
  98. <tr>
  99. <td height="40"><img src="images/bando-mag.gif" width="900" height="40" /></td>
  100. </tr>
  101. </table>
  102. <table width="900" border="0" align="center" cellpadding="15" cellspacing="0" bgcolor="#fffef8">
  103. <tr>
  104. <td width="290" colspan="2" align="left" valign="top"><span class="style6">Le concept COUPONS MALINS :</span><br />
  105. <span class="style15"><br />
  106. - Un mensuel entièrement GRATUIT<br />
  107. - Livré dans votre boite aux lettres<br />
  108. - 3 semaines de programmes télé</span></td>
  109. <td width="300" align="left" valign="top"><br />
  110. <span class="style15"><br />
  111. - Des infos culture, loisirs, people<br />
  112. - Des bons plans shopping<br />
  113. - Des réductions chez vos commerçants</span></td>
  114. <td align="center" valign="middle"><a href="http://shopping.tellmeplus.com/" target="_blank" onmouseover="MM_swapImage('Image18','','images/bh-plans.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/bn-plans.png" name="Image18" width="89" height="82" hspace="20" border="0" id="Image18" /></a></td>
  115. </tr>
  116. <tr>
  117. <td width="72" rowspan="2" align="center" valign="baseline"><p><a href="http://www.couponsmalins.fr/archives/couponsmalins023.pdf" target="_blank"><img src="images/couvcoupons-n023.jpg" width="125" height="185" border="0" /></a><br />
  118. <br />
  119. <a href="http://www.couponsmalins.fr/archives/couponsmalins023.pdf" target="_blank" class="style9"><strong>Téléchargez notre dernier numéro</strong></a></p>
  120. <p class="style19"> </p>
  121. <p class="style19"> </p>
  122. <p class="style19"> </p>
  123. <p class="style19">Edition</p>
  124. <p class="style19">CERGY PONTOISE</span></p></td>
  125. <td width="72" rowspan="2" align="center"><p class="style19">Edition</p>
  126. <p class="style19">L'ISLE ADAM</p>
  127. <p class="style19"> </p>
  128. <p class="style19"> </p>
  129. <p class="style19"> </p>
  130. <p><a href="http://www.couponsmalins.fr/archives/couponsmalinscp003.pdf" target="_blank"><img src="images/couvcouponscp-n003.jpg" width="125" height="184" border="0" /></a></p>
  131. <p><a href="http://www.couponsmalins.fr/archives/couponsmalinscp003.pdf" target="_blank" class="style9"><strong>Téléchargez notre dernier numéro</strong></a></p></td>
  132. <td colspan="2"><span class="style6">Coupons Malins : le New Magazine qui joint l'utile à l'agréable !<br />
  133. </span><span class="style15"><br />
  134. <span class="style18">100% Utile</span> avec 3 semaines de programmes TV, des infos locales, des infos People, des jeux, l'horoscope et un MAX de coupons de réduction chez nos commerçants partenaires.<br />
  135. <br />
  136. Parceque le coût de la vie ne cesse d'augmenter,<br />
  137. <strong>Coupons Malins</strong> vous apporte des solutions pour économiser et consommer Malin.<br />
  138. <br />
  139. <span class="style18">100% Agréable</span> car distribué gratuitement en boîte aux lettres<br />
  140. <br />
  141. <span class="style18">Ne courez pas l'acheter, vous le reçevrez GRATUITEMENT !</span><br />
  142. <br />
  143. Avec <strong>Coupons Malins</strong> toutes les 3 semaines des réductions à portée de mains !<br />
  144. Une seule consigne : <strong>Repérez ! Découpez ! Profitez !<br />
  145. <br />
  146. </strong><span class="style17">Alors tous à vos ciseaux !<br />
  147. <br />
  148. <br />
  149. </span></span></td>
  150. </tr>
  151. <tr>
  152. <td colspan="2" align="left" valign="top"><a href="programmes.html"><img src="images/chaines-tv.gif" width="552" height="78" border="0" /></a></td>
  153. </tr>
  154. </table>
  155. <table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
  156. <tr>
  157. <td height="35" align="center" valign="middle" background="images/mosa-bas.png"><a href="espacepro/assurance" target="_blank" class="EspacePro"><strong>Espace Pro</strong></a> - Conception et Réalisation : <a href="http://www.bibconcept.fr" target="_blank" class="style9"><strong>www.bibconcept.fr</strong></a> - Votre Graphiste à Lyon</td>
  158. </tr>
  159. </table>
  160. </body>
  161. </html>


Si quelqu'un pourrait me venir à ma rescousse...!
Je vous remercie par avance.

Edit : Désolé pour la taille du code... :X

Autres pages sur : probleme affichage firefox

a c 232 L Programmation
a b È Firefox
20 Juillet 2012 12:20:26

Salut,

Je serais tenté de te dire de ne pas faire de designs avec des tableaux, c'est pas fait pour.
Il faut utiliser des div. Mais forcément, les outils qui permettent de faire des designs créé souvent des tableaux...

Je vois que t'es infographiste, essaie de prendre un peu de temps pour apprendre le HTML / CSS, et tu pourras reproduire tout seul tes designs. Ca sera beaucoup plus propre.
20 Juillet 2012 13:02:49

Le truc c'est que ce n'est pas moi qui ai conçu le site, il a déjà plusieurs années, je devais juste changer un petit bout de mise en page.
J'ai finalement trouvé la solution, dans ma feuille de style j'ai retiré le "vertical-align = 0%" x)
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