2010-12-06 5 views
0

Ce tableau HTML est mal interprété par certains navigateurs, et je ne peux pas comprendre pourquoi:Mauvaise interprétation d'Internet Explorer 8 colspan?

affichage

Chrome et Outlook le rendu, je pense, où les 2e cellules du 2e et 3e lignes passent au-dessus de la 4ème cellule du lignes 4 à 10.

Screenshot of Chrome rendering http://www.team-logics.com/public/stackoverflow/2010-12-05-Chrome.png

Internet Explorer 8 et l'affichage Opera 10 quelque chose de différent, où la cellule 4 des lignes 4 à 10 « commence après » les 2e cellules du 2e et 3e lignes.

Screenshot of Internet Explorer 8 rendering http://www.team-logics.com/public/stackoverflow/2010-12-05-IE.png

Toute deviner pourquoi mes colspans ne sont pas rowspans ET interprété de la même façon? Quels navigateurs ont raison? Comment puis-je organiser mon code de manière à ce que tout le contenu soit rendu comme Chrome?

Mon code actuel: (Désolé, le code sale, cela est censé être une signature électronique)

<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="400"> 
    </td> 
</tr> 
<tr style='mso-yfti-irow:1;height:12pt' height="16"> 
    <td rowspan=9 valign=top style='border:1px solid black;height:12pt;width:14.25pt' width="19"> 
    </td> 
    <td bgcolor="red" colspan=3 valign=top style='border:1px solid black;height:12pt;width:203.25pt;' width="271"> 
    </td> 
    <td rowspan=2 valign=top style='border:1px solid black;height:12pt;width: 72pt' width="96"> 
    </td> 
    <td rowspan=2 valign=top style='border:1px solid black;height:12pt;width:10.5pt' width="14"> 
    </td> 
</tr> 
<tr style='mso-yfti-irow:2;height:12pt' height="16"> 
    <td bgcolor="red" colspan=3 valign=top style='border:1px solid black;height:12pt;width:203.25pt;' width="271" height="16"> 
    </td> 
</tr> 
<tr style='mso-yfti-irow:3;height:3.75pt' height="5"> 
    <td colspan=2 valign=top style='border:1px solid black;height:3.75pt;width:170.25pt' width="227" height="5"> 
    </td> 
    <td colspan=3 rowspan=7 valign=top style='border:1px solid black;height:3.75pt;width:115.5pt' width="154"> 
    </td> 
</tr> 
<tr style='mso-yfti-irow:4;height:11.25pt' height="15"> 
    <td valign=top style='border:1px solid black;height:11.25pt;width:27.75pt' width="37"> 
    </td> 
    <td valign=top style='border:1px solid black;height:11.25pt;width:142.5pt' width="190"> 
    </td> 
</tr> 
<tr style='mso-yfti-irow:5;height:11.25ptpt' height="15"> 
    <td valign=top style='border:1px solid black;height:11.25pt;width:27.75pt' width="37" height="15"> 
    </td> 
    <td valign=top style='border:1px solid black;height:11.25pt;width:142.5pt' width="190" height="15"> 
    </td> 
</tr> 
<tr style='mso-yfti-irow:6;height:3.75pt' height="5"> 
    <td colspan=2 valign=top style='border:1px solid black;height:3.75pt;width:170.25pt' width="227"> 
    </td> 
</tr> 
<tr style='mso-yfti-irow:7;height:11.25pt' height="15"> 
    <td colspan=2 valign=top style='border:1px solid black;height:11.25pt;width:170.25pt' width="227" height="31" > 
    </td> 
</tr> 
<tr style='mso-yfti-irow:8;height:23.25pt' height="31"> 
    <td colspan=2 valign=top style='border:1px solid black;height:23.25pt;width:170.25pt' width="227"> 
    </td> 
</tr> 
<tr style='mso-yfti-irow:9;mso-yfti-lastrow:yes;height:50.25pt' height="67"> 
    <td colspan=2 valign=top style='border:1px solid black;height:50.25pt;width:170.25pt' width="227"> 
    </td> 
</tr> 
</table> 
+0

Les images ne sont plus disponibles, ce qui rend la question moins claire. –

Répondre

0

Il ne doute pas que pour aider un grand nombre de colonnes, vous avez à la fois une largeur CSS (spécifiée dans l'attribut style) et une largeur réelle. Ces deux valeurs semblent être différentes, et je soupçonne qu'il y a une différence dans la façon dont les navigateurs décident lesquels utiliser. Essayez d'enlever la duplication et voyez ce qui se passe.

+0

Merci pour votre réponse Stephen. Malheureusement, ce n'est pas la source de mon problème, je n'avais à l'origine que la largeur px. J'ai ajouté la largeur de style parce que j'ai remarqué que je travaillais mieux pour certains lecteurs de courrier électronique. – Jalil

+0

Je définis toutes les valeurs selon 96px = 72 pt. – Jalil

+0

Ok. Cela pourrait être une différence dans l'interprétation de la taille des points. Juste pour humour, essayez de remplacer les tailles de points par des tailles de pixels (à tout le moins, ce sera plus cohérent). –

Questions connexes