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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Rendu de colspan par IE8 incorrect ?

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Rendu de colspan par IE8 incorrect ?

n°2040144
daarf
hehe
Posté le 05-12-2010 à 18:04:16  profilanswer
 

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
mood
Publicité
Posté le 05-12-2010 à 18:04:16  profilanswer
 

n°2040172
gatsu35
Blablaté par Harko
Posté le 05-12-2010 à 21:23:20  profilanswer
 

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
n°2040173
gatsu35
Blablaté par Harko
Posté le 05-12-2010 à 21:35:58  profilanswer
 

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
n°2040174
gatsu35
Blablaté par Harko
Posté le 05-12-2010 à 21:41:07  profilanswer
 

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
n°2040184
daarf
hehe
Posté le 06-12-2010 à 00:38:00  profilanswer
 

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
n°2040185
gatsu35
Blablaté par Harko
Posté le 06-12-2010 à 00:57:35  profilanswer
 

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


---------------
Blablaté par Harko
n°2040186
daarf
hehe
Posté le 06-12-2010 à 00:59:41  profilanswer
 

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
n°2040187
gatsu35
Blablaté par Harko
Posté le 06-12-2010 à 01:02:35  profilanswer
 

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


---------------
Blablaté par Harko
n°2040188
daarf
hehe
Posté le 06-12-2010 à 01:06:10  profilanswer
 

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
n°2047896
daarf
hehe
Posté le 10-01-2011 à 15:57:21  profilanswer
 

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

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

  Rendu de colspan par IE8 incorrect ?

 

Sujets relatifs
Probleme IE8lien sur image avec IE8
[R/Java/C++] Utiliser le moteur de rendu graphique R dans une appliMacro Excel: Pivottables: Argument ou Appel de procédure incorrect
[résolu] plugin svg pour IE8[résolu] Problème sous firefox et IE8 pour répéter une image
[Résolu] Problème getElementById IE8 et safariMenu CSS déroulant, problème IE8
chevauchement sous ie7 bon sur ie8 et ff[php] Fonction mail() sous IE8
Plus de sujets relatifs à : Rendu de colspan par IE8 incorrect ?


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR