Incompatible espaces ci-dessous TD éléments dans les tableaux en HTML e-mail dans Outlook (2007 et 2010)

J'ai recherché ce problème, de trouver de nombreuses corrections suggérées sur le web, mais rien ne fonctionne.

Le problème est l'écart entre un TD élément dans un tableau dans un e-mail HTML, je suis de la conception. C'est l'affichage de cette façon uniquement dans Outlook 2007 et 2010.

Ici est un lien vers une capture d'écran du problème

Dans la barre latérale sur la droite, il devrait y avoir aucun espace entre le "Niveau 2" et les minces coin arrondi de la boîte au-dessus d'elle.

Voici le code de la table imbriquée qui crée la boîte bleue:

<table class="box" width="200" border="0" cellspacing="0" cellpadding="0"><tr><td style='line-height:0;font-size:0'><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_top.gif" style="display:block" width="200" height="10" /></td></tr><tr><td class="box_dark"><h2>Level 2<br /><span class="white">Care Assistants</span></h2><h2>Level 3<br /><span class="white">Senior Carers</span></h2><h2 class="norule">Level 5<br /><span class="white">Managers and Deputy Managers</span></h2></td></tr><tr><td style='line-height:0'><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_bottom.gif" style="display:block" width="200" height="10" /></td></tr></table>

Comme vous pouvez le voir, j'ai supprimé tous les espaces blancs comme cela a été suggéré dans un du contournement que j'ai trouvé. J'ai également inséré le "line-height:0;font-size:0' style dans le TD élément et le "display:block" de style dans l'image elle-même, encore une fois tous proposé des solutions de rechange. Aucun de ces a fait la moindre différence.

Ce problème n'apparaît dans aucun autre client de messagerie ou le navigateur.

S'il vous plaît aider!

OriginalL'auteur Soutpiel | 2011-06-29

  1. 10

    À l'aide de tableaux est une pratique standard dans l'email html construit parce que le support de css est pauvre dans les clients de messagerie, notamment Outlook.

    Garder votre structure de table, mais essayez ces ajouts:

    • Ajouter valign="bottom" à la td cellule contenant box_dark_top.gif et valign="top" pour les deux cellules de la
    • Pour chaque image, réglez le css comme style="display:block;margin:0;padding:0"

    • Utilisation du css plutôt qu'interne

      <table class="box" width="200" border="0" cellspacing="0" cellpadding="0">
<tr><td valign="bottom"><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_top.gif" style="display:block;margin:0;padding:0" width="200" height="10" alt="" /></td></tr>
<tr>
    <td valign="top" class="box_dark">
        <h2>Level 2<br /><span class="white">Care Assistants</span></h2>
        <h2>Level 3<br /><span class="white">Senior Carers</span></h2>
        <h2 class="norule">Level 5<br /><span class="white">Managers and Deputy Managers</span></h2>
    </td>
</tr>
<tr><td valign="top"><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_bottom.gif" style="display:block;margin:0;padding:0" width="200" height="10" alt="" /></td></tr></table>
    Essayez d'utiliser des styles en ligne appliqué à des éléments HTML plutôt que de classes, il fixe le rendu parfois.

    OriginalL'auteur marissajmc

  2. 0

    Outlook à partir de 2007 utilise Word pour générer du code HTML. Voici un article à ce sujet, avec des liens vers plus fortement opiniâtre des articles et des sites web.

    Peut-être que vous pourriez essayer de la conception de votre message dans Word (ou Outlook lui-même)? Bien sûr, alors il peut ne pas s'afficher correctement dans un sane client de messagerie.

    Oui, ça peut poser problème, comme Outlook 2007/2010 ignore certains des styles appliqués. Vous pouvez cliquer sur Répondre ou Transférer et enregistrer le code HTML à partir de Word pour voir quel est le problème avec le HTML et le CSS.

    OriginalL'auteur Hugh Allen

  3. 0

    Définir la hauteur de la TD, ainsi que tous les autres TD qui doit avoir une hauteur fixe:

    <td valign="bottom" height="10" width="200">

    *Vous devez également être à l'aide de largeur sur TOUS les TD de e-mail.

    OriginalL'auteur JustinJason

  4. 0

    J'ai trouvé que Outlook est d'emballage de balises img style et un margin-top à chaque fois qu'ils "sentent" comme elle. Vous pouvez vérifier le code html généré par le gain de l'e-mail au format html.

    OriginalL'auteur killebytes