5546 sujets

Sémantique web et HTML

Bonjour à tous,
Après avoir fait le tour des sujets du forum traitant d'Outlook et de l'emailing, je n'ai pas trouvé ma solution. Je vous soumets donc mon problème.

Je viens de développer ma première newsletter en deux colonnes après avoir suivi un tas de conseils et même une petite formation sur le responsive. J'arrive donc aujourd'hui à quelque chose de relativement propre (selon mes connaissances) en tableaux, qui s'adapte très bien à tous les gabarits de webmail et autres.

Je termine donc ma conception par des tests sur "email on acid" et je découvre qu'un problème d'affichage subsiste chez l'ami Outlook 2007/2010. En fait j'ai deux colonnes de contenu l'une à côté de l'autre avec un espace volontaire entre les deux. On m'a dit qu'il fallait laisser au moins 20px entre ces deux colonnes pour qu'elle se comportent correctement dans Outlook, chose que j'ai faite puisque j'ai 28px. Malgré tout, la sidebarre de droite s'affiche en diagonale (je ne sais pas comment décrire ca autrement). J'ai essayé de changer des styles (inline bien sûr), les dimensions... rien n'y fait. Et Il n'y a qu'avec Outlook 2007/2010 qu'apparait ce problème. Nickel sur Outlook 2003 et 2013, rien à dire sur les autres supports. Sauf qu'Outlook est assez important dans ma BDD de destinataires...

Voir l'image ici : http://www.bretagne.synagri.com/ca1/conf.nsf/ATWEBv0901/E2D59184169C2BA9C1257D2E0043AB37/$FILE/probleme-colonne.jpg
http://www.bretagne.synagri.com/ca1/conf.nsf/ATWEBv0901/E2D59184169C2BA9C1257D2E0043AB37/$FILE/probleme-colonne.jpg


Auriez-vous une idée pour résoudre ce problème ?

Voici une partie du code :

<td bgcolor="#FFFFFF" style="padding:9px">
                        <!-- Tableau 1 - actualités-->
                                                  <table class="colonne" width="350" border="0" cellspacing="0" cellpadding="0" align="left">
                         <!-- Tableau 1 - Catégorie 1-->

 
<!-- Début de la partie la Chambre en Action -->
 	<tr>
    <td style="border:1px dotted #CCCCCC; padding:10px">
   		<table border="0" cellspacing="0" cellpadding="0">
        	<tr>
      <td width="330" height="25" style="padding-left:10px; font-size:18px; font-weight:bold;text-transform:uppercase; background-color:#00A9E0; color:#FFFFFF">La chambre en action</td>
   </tr>

...

<!-- Début colonne de droite -->
                                                 <table class="colonne" width="200" border="0" cellspacing="0" cellpadding="0" align="right">
                                                    <tr>
                                                      <td width="200" style="border:1px dotted #CCCCCC; padding:9px">
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
     <td width="180" height="20" style="padding-left:5px; color:#FFFFFF; font-size:15px; font-weight:bold;text-transform:uppercase; background-color:#00A9E0">C'est le moment</td>
 </tr>

Modifié par mrmerry (08 Aug 2014 - 15:09)