Rendu de colspan par IE8 incorrect ?

Rendu de colspan par IE8 incorrect ? - HTML/CSS - Programmation

Marsh Posté le 05-12-2010 à 18:04:16    

Bonjour,  
 
J'ai un problème avec ce tableau HTML, qui est interprété différemment suivant les navigateurs :  
 
Chrome and Outlook affichent le rendu que j'attends, c'est-à-dire où les 2èmes cellules des 2ème et 3ème lignes passent au dessus de la 4ème cellule des lignes 4 à 10 :
 
http://www.team-logics.com/public/stackoverflow/2010-12-05-Chrome.png
 
Internet Explorer 8 and Opera 10 affichent un rendu différent, ou la 4ème cellule des lignes 4 à 10 ne commence qu'après les 2èmes lignes des lignes 2 et 3 :  
 
http://www.team-logics.com/public/stackoverflow/2010-12-05-IE.png
 
Une idée de la raison de cette différence d'interprétation de mes colspans / rowspans ?
Qui a raison ?
Comment puis-je arranger mon code pour que tout le monde l’interprète comme Chrome ?
 
Mon code actuel :  
 
    <table border=0 cellspacing=0 cellpadding=0 width=400 style='width:300pt;border-collapse:collapse;border:1px solid black;'>
     <tr style='height:9.75pt'>
      <td colspan=6 valign=top style='border:1px solid black;height:9.75pt;width:300pt;' width="400px">
      </td>
     </tr>
     <tr style='mso-yfti-irow:1;height:12pt' height="16px">
      <td rowspan=9 valign=top style='border:1px solid black;border-top:1px solid black;height:12pt;width:14.25pt' width="19px">
      </td>
      <td bgcolor="red" colspan=3 valign=top style='border:1px solid black;height:12pt;width:203.25pt;' width="271px">
      </td>
      <td rowspan=2 valign=top style='border:1px solid black;height:12pt;width: 72pt' width="96px">
      </td>
      <td rowspan=2 valign=top style='border:1px solid black;height:12pt;width:10.5pt' width="14px">
      </td>
     </tr>
     <tr style='mso-yfti-irow:2;height:12pt' height="16px">
      <td bgcolor="red" colspan=3 valign=top style='border:1px solid black;height:12pt;width:203.25pt;' width="271px" height="16px">
      </td>
     </tr>
     <tr style='mso-yfti-irow:3;height:3.75pt' height="5px">
      <td colspan=2 valign=top style='border:1px solid black;height:3.75pt;width:170.25pt' width="227px" height="5px">
      </td>
      <td colspan=3  rowspan=7 valign=top style='border:1px solid black;height:3.75pt;width:115.5pt' width="154px">
      </td>
     </tr>
     <tr style='mso-yfti-irow:4;height:11.25pt' height="15px">
      <td valign=top style='border:1px solid black;height:11.25pt;width:27.75pt' width="37px">
      </td>
      <td valign=top style='border:1px solid black;height:11.25pt;width:142.5pt' width="190px">
      </td>
     </tr>
     <tr style='mso-yfti-irow:5;height:11.25ptpt' height="15px">
      <td valign=top style='border:1px solid black;height:11.25pt;width:27.75pt' width="37px" height="15px">
      </td>
      <td valign=top style='border:1px solid black;height:11.25pt;width:142.5pt' width="190px" height="15px">
      </td>
     </tr>
     <tr style='mso-yfti-irow:6;height:3.75pt' height="5px">
      <td colspan=2 valign=top style='border:1px solid black;height:3.75pt;width:170.25pt' width="227px">
      </td>
     </tr>
     <tr style='mso-yfti-irow:7;height:11.25pt' height="15px">
      <td colspan=2 valign=top style='border:1px solid black;height:11.25pt;width:170.25pt' width="227px" height="31px" >
      </td>
     </tr>
     <tr style='mso-yfti-irow:8;height:23.25pt' height="31px">
      <td colspan=2 valign=top style='border:1px solid black;height:23.25pt;width:170.25pt' width="227px">
      </td>
     </tr>
     <tr style='mso-yfti-irow:9;mso-yfti-lastrow:yes;height:50.25pt' height="67px">
      <td colspan=2 valign=top style='border:1px solid black;height:50.25pt;width:170.25pt' width="227px">
      </td>
     </tr>
    </table>


---------------
Jalil
Reply

Marsh Posté le 05-12-2010 à 18:04:16   

Reply

Marsh Posté le 05-12-2010 à 21:23:20    

des heights et des width en pt
des styles qui n'existent pas comme mso-yfti-irow:X
des attributs widht et height avec px dedans  
 
 
d'abord nettoie ton HTML :)


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

Marsh Posté le 05-12-2010 à 21:35:58    

Voila ton code nettoyé :

Code :
  1. <table border="0" cellspacing="0" cellpadding="0" width="400" style="border-collapse:collapse;border:1px solid black;">
  2. <tr>
  3. <td colspan="6" valign="top" style="border:1px solid black;" width="400" height="13">
  4. </td>
  5. </tr>
  6. <tr>
  7. <td rowspan="9" valign="top" style="border:1px solid black;" width="19" height="16">
  8. </td>
  9. <td bgcolor="red" colspan="3" valign="top" style="border:1px solid black;" width="271">
  10. </td>
  11. <td rowspan="2" valign="top" style="border:1px solid black;" width="96">
  12. </td>
  13. <td rowspan="2" valign="top" style="border:1px solid black;" width="14">
  14. </td>
  15. </tr>
  16. <tr height="16">
  17. <td bgcolor="red" colspan="3" valign="top" style="border:1px solid black;" width="271" height="16">
  18. </td>
  19. </tr>
  20. <tr height="5">
  21. <td colspan="2" valign="top" style="border:1px solid black;" width="227" height="5">
  22. </td>
  23. <td colspan="3" rowspan="7" valign="top" style="border:1px solid black;" width="154">
  24. </td>
  25. </tr>
  26. <tr height="15">
  27. <td valign="top" style="border:1px solid black;" width="37">
  28. </td>
  29. <td valign="top" style="border:1px solid black;" width="190">
  30. </td>
  31. </tr>
  32. <tr height="15">
  33. <td valign="top" style="border:1px solid black;" width="37" height="15">
  34. </td>
  35. <td valign="top" style="border:1px solid black;" width="190" height="15">
  36. </td>
  37. </tr>
  38. <tr height="5">
  39. <td colspan="2" valign="top" style="border:1px solid black;" width="227">
  40. </td>
  41. </tr>
  42. <tr height="15">
  43. <td colspan="2" valign="top" style="border:1px solid black;" width="227" height="31">
  44. </td>
  45. </tr>
  46. <tr height="31">
  47. <td colspan="2" valign="top" style="border:1px solid black;" width="227">
  48. </td>
  49. </tr>
  50. <tr height="67">
  51. <td colspan="2" valign="top" style="border:1px solid black;" width="227">
  52. </td>
  53. </tr>
  54. </table>


Message édité par gatsu35 le 05-12-2010 à 21:39:14

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

Marsh Posté le 05-12-2010 à 21:41:07    

J'espère que ce ne sont pas les bases d'une structure de page web :/
Pour un emailing OK mais pas pour une page web :)
 
Autre chose vérifie des col="span", tu devrais avoir le compte exact sur chaque ligne, et là c'est le bordel


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

Marsh Posté le 06-12-2010 à 00:38:00    

Merci Gatsu pour ta réponse, mais il s'agit en effet d'une signature e-mail.  
 
J'ai nettoyé pas mal de choses pour simplifier mon post, notamment du code ajouté par Outlook, même s'il en restait encore comme tu as pu voir.  
 
Egalement, j'ai pu remarquer que le tableau passait mieux sur les différents système de messagerie en précisant les tailles en px et en pt ...
 
J'ai bien recompté des dizaines de fois les colspan et rowspan et il ne me semble pas m'être trompé. En outre, il est normal que la somme des colonnes et des colspans d'une ligne ne tombe pas toujours sur 6, à cause des rowspans ...
 
Bref, tout ça ne répond pas à ma question ...


---------------
Jalil
Reply

Marsh Posté le 06-12-2010 à 00:57:35    

Ta signature ressemble à quoi, car pour avoir un tableau aussi énorme il y a un truc qui ne va pas :/


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

Marsh Posté le 06-12-2010 à 00:59:41    

Elle ressemble à :  
Prénom nom
Titre
Tél
Fax
e-mail
Site Logo
 
... mais je ne vois pas bien en quoi ça répond à ma question ...


---------------
Jalil
Reply

Marsh Posté le 06-12-2010 à 01:02:35    

Pourquoi tu te lances dans un tableau aussi complexe ? il n'y a peut-être au final pas besoin


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

Marsh Posté le 06-12-2010 à 01:06:10    

Car j'ai une bordure graphique qui fait tout le tour du tableau, plus ou moins épaisse par endroit.  
 
L'idéal aurait été d'avoir une image en background mais ça n'est pas supporté par Outlook.  
 
Si tu connais une bonne méthode pour faire une signature HTML qui passe partout, je suis prendeur.  
 
Mais tout ça n'explique toujours pas la différence de rendu entre les navigateurs ...
Des colspans/rowspan, ça reste quand même des mathématiques assez simples ...


---------------
Jalil
Reply

Marsh Posté le 10-01-2011 à 15:57:21    

J'ai déporté toutes mes mesures "width" dans des balises <col>.
 
<col width="19px"/>
<col width="37px"/>
<col width="190px"/>
<col width="44px"/>
<col width="96px"/>
<col width="14px"/>
 
ça a marché mieux, mais j'ai également dû préciser table-layout:fixed sur la table.  
 
Après ça mon exemple simplifié marchait bien dans les navigateurs mais j'ai enchaîné les galères sur les différentes messageries.  
 
J'ai finalement refait toute ma signature avec 4 ou 5 tableaux imbriqués plutôt que des col/rowspans. Horrible.  
 
Merci à JulienC : http://www.developpez.net/forums/d [...] incorrect/


---------------
Jalil
Reply

Sujets relatifs:

Leave a Replay

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