5568 sujets

Sémantique web et HTML

Bonjour tout le monde !

Je suis actuellement entrain d'intégrer une newsletter et j'ai un petit problème qui se pose à moi, j'ai découpé la maquette et je l'ai intégrée à l'aide de tableaux. Je n'ai que des bandeaux de 650px de large mais à un endroit j'ai un menu. J'ai donc découpé les images en bandes et mis une colonne par item du menu. J'ai juste rajouté un colspan=x sur tous les td dessus et dessous pour qu'il y ait fusion.
Malheureusement le dernier item sort de quelques pixels hors de la newsletter Smiley eek sous outlook 2007 alors que tous les webmails interprètent correctement le html, je vous met le code qui est très simple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Document sans nom</title>
</head>

<body>
<table width="649" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="9"><img src="file:///G|/Newsletter/html2/images/NEWSLETTER_r1_c1.jpg" width="650" height="121"></td>
  </tr>
  <tr>
    <td width="209"><img src="file:///G|/Newsletter/html2/images/NEWSLETTER_r2_c1.jpg" width="209" height="16"></td>
    <td width="33"><img src="file:///G|/Newsletter/html2/images/NEWSLETTER_r2_c5.jpg" width="33" height="16"></td>
    <td width="62"><img src="file:///G|/Newsletter/html2/images/NEWSLETTER_r2_c6.jpg" width="62" height="16"></td>
    <td width="25"><img src="file:///G|/Newsletter/html2/images/NEWSLETTER_r2_c7.jpg" width="25" height="16"></td>
    <td width="39"><img src="file:///G|/Newsletter/html2/images/NEWSLETTER_r2_c8.jpg" width="39" height="16"></td>
    <td width="31"><img src="file:///G|/Newsletter/html2/images/NEWSLETTER_r2_c9.jpg" width="31" height="16"></td>
    <td width="33"><img src="file:///G|/Newsletter/html2/images/NEWSLETTER_r2_c11.jpg" width="33" height="16"></td>
    <td width="44"><img src="file:///G|/Newsletter/html2/images/NEWSLETTER_r2_c14.jpg" width="44" height="16"></td>
    <td width="174"><img src="file:///G|/Newsletter/html2/images/NEWSLETTER_r2_c15.jpg" width="174" height="16"></td>
  </tr>
  <tr>
    <td colspan="9"><img src="file:///G|/Newsletter/html2/images/NEWSLETTER_r3_c1.jpg" width="650" height="208"></td>
  </tr>
  <tr>
    <td colspan="9"><img src="file:///G|/Newsletter/html2/images/NEWSLETTER_r4_c1.jpg" width="650" height="35"></td>
  </tr>
  <tr>
    <td colspan="9"><img src="file:///G|/Newsletter/html2/images/NEWSLETTER_r5_c1.jpg" width="650" height="286"></td>
  </tr>
  <tr>
    <td colspan="9"><img src="file:///G|/Newsletter/html2/images/NEWSLETTER_r6_c1.jpg" width="650" height="139"></td>
  </tr>
  <tr>
    <td colspan="9"><img src="file:///G|/Newsletter/html2/images/NEWSLETTER_r9_c1.jpg" width="650" height="301"></td>
  </tr>
  <tr>
    <td colspan="9"><img src="file:///G|/Newsletter/html2/images/NEWSLETTER_r13_c1.jpg" width="650" height="296"></td>
  </tr>
  <tr>
    <td colspan="9"><img src="file:///G|/Newsletter/html2/images/NEWSLETTER_r14_c1.jpg" width="650" height="68"></td>
  </tr>
</table>
</body>
</html>


Quelqu'un à une idée pour éviter que la dernière image ne sorte ? Outlook 2007 est vraiment une calamité....
Modifié par N-J (10 Sep 2009 - 10:05)
Ou c'est display: inline, je ne sais pu Smiley confus


enfin essaye les deux, sinon je n'ai pas de solution ^^
Modifié par Fabious (09 Sep 2009 - 22:04)
Je vais tenter ça demain, sinon je crois que la part des particuliers qui utilisent Outlokk 2007 est assez faible, non ?
Je confirme, tu peux utiliser :

<img style="display: block;"


Sur tes images, et ajouter aussi un border="0", bien qu'il n'y ait pas de liens sur tes images. Tu peux tester aussi un

<td style="padding: 0px;"


Enfin, si malgré cela tu as encore des soucis, fais plutôt plusieurs tables les unes sous les autres plutôt que d'utiliser des colspan, des fois Outlook 2007 a des réactions étranges. Je pense que beaucoup de gens sont malheureusement sur Outlook 2007 Smiley cligne
scarlier a écrit :

Enfin, si malgré cela tu as encore des soucis, fais plutôt plusieurs tables les unes sous les autres plutôt que d'utiliser des colspan, des fois Outlook 2007 a des réactions étranges. Je pense que beaucoup de gens sont malheureusement sur Outlook 2007 Smiley cligne


Ahhh oui j'avais pas pensé aux tables les unes sous les autres, je teste ça ^^
Plusieurs tableaux et des marges 0 et padding 0 partout fonctionne parfaitement!
Merci ! Smiley cligne
Le problème vient que Microsoft a décidé d'utiliser le moteur de rendu de Word 2007 pour tout ce qui est HTML Smiley bawling Au contraire d'Outlook 2003 qui utilisait IE.

La raison officielle avancée était qu'ils utilisaient Word pour la création de mail, puis IE pour l'affichage. Du coup y'avait des différences de rendu. Là ils ont tout unifié, avec tous les problèmes que ça comporte...