Outlook 2010图像创建差距

时间:2015-11-17 15:10:43

标签: image outlook html-email

我正在尝试解决Outlook 2010上的问题。我必须在HTML电子邮件中使用表格。

我无法理解为什么我的侧边栏在outlook 2010上有很大的差距(在其他所有电子邮件客户端上都可以) http://hpics.li/e4807bb

我尝试逐个删除每个块,问题是人物图像组。

这是我的电子邮件代码。

有人有解决方案或任何线索吗?

谢谢你们

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Fondation Groupe Adecco</title>

<meta  name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0," />

<style type="text/css">

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);

html { width: 100%; }
body {margin:0; padding:0; width:100%; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
img {border:0; -ms-interpolation-mode:bicubic;}

table {table-layout:fixed;}
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }

a:hover {text-decoration:underline !important;}

.images {display:block !important; width:100% !important;}

[style*="Open Sans"] {
    font-family: 'Open Sans', Arial, sans-serif !important
}
[style*="PT Sans"] {
    font-family: 'PT Sans', Arial, sans-serif !important
}

.img_mob {
  width: 100% !important;
}


/* MEDIA QUIRES */

@media only screen and (max-width:640px)

{

	body {width:auto!important;}
	table[class=devicewidth] {width:70%!important;}
	table[class=devicewidth] table {width:100%!important;}
  img.resize {max-width: 100%!important;}

}



@media only screen and (max-width:480px)

{

	table[class=devicewidth] {width:320px!important;}
  .full {display:block;width:100%;}

  * {
  	-webkit-text-size-adjust: none !important;
  }
  table[class="none"], tr[class="none"], td[class="none"], br[class="none"], span[class="none"] {
  	display: none !important;
  }
  *[class].table {
    width: 320px !important;
  }
  *[class].small {
    display: block !important;
    width: 320px !important;
    overflow: visible !important;
    float: none !important;
    height: auto !important;
  }
  *[class].solutions {
    width: 320px !important;
    height: 279px !important;
  }
  *[class].groupe {
    width: 320px !important;
    height: 180px !important;
  }
  .none {
    display: none !important;
  }


}

</style>

</head>

<body topmargin="0" rightmargin="0" bottommargin="0" leftmargin="0">

    <!-- PRE HEADER -->

    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#eb212e">
      <tr>
        <td>

            <table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="devicewidth" style="">
              <tr>
                <td valign="middle" height="" style="padding:10px 1px 10px;">

                    <table width="280" border="0" cellspacing="0" cellpadding="0" align="left">
                      <tr>
                        <td align="left" style="color: #f2c5c8;font-family: Arial;font-size: 12px;font-weight: 400;  padding:0px 1px 0px 0;">
                          <b>Newsletter Fondation groupe Adecco</b>
                        </td>
                      </tr>
                    </table>

                    <table width="400" border="0" cellspacing="0" cellpadding="0" align="right">
                      <tr>
                        <td align="left" style="color: #f2c5c8;font-family: Arial;font-size: 12px;font-weight: 400; padding:0px 1px 0px 0;">
                          Si vous avez des difficult�s pour visualiser ce message. <a href="{MirrorPage}" style="color:#f2c5c8; text-decoration:none;">Cliquez ici</a>
                        </td>
                      </tr>
                    </table>

                </td>
              </tr>
            </table>

        </td>
      </tr>
    </table>

    <!-- ESPACE -->

    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
      <tr>
        <td height="30">&nbsp;</td>
      </tr>
    </table>

    <!-- HEADER -->

    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
      <tr>
        <td>

          <table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="devicewidth" style="">
            <tr>
              <td valign="middle" height="">

                <table width="700" border="0" cellspacing="0" cellpadding="0" align="left">
                  <tr>

                    <td align="center" valign="top"><a href="#" target="_blank" style="outline:none"><img src="http://s362172362.onlinehome.fr/mail/adecco/head.jpg" width="700" height="165" style="display:block" border="0" title="Adecco vous propose ses solutions" alt="Adecco vous propose ses solutions" class="none"></a><!--[if !mso]><!-- -->
                 <a href="#" target="_blank" style="outline:none"><img src="http://s362172362.onlinehome.fr/mail/adecco/head_mob.jpg" width="0" height="0" class="small block hide solutions" border="0" style="width:0px; overflow:hidden; float:left; display:none; line-height:0px; margin:0; padding:0;" alt="Adecco vous propose ses solutions" title="Adecco vous propose ses solutions"></a>
                  <!--<![endif]--></td>
                  </tr>
                </table>


              </td>
            </tr>
          </table>


        </td>
      </tr>
    </table>


    <!-- ESPACE -->

    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
      <tr>
        <td height="8"></td>
      </tr>
    </table>

    <!-- HEADER -->

    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3" valign="top">
      <tr>
        <td>

          <table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="devicewidth" style="">
            <tr>
              <td valign="middle" height="">

                <table width="460" border="0" cellspacing="0" cellpadding="0" align="left">
                  <tr>
                    <td valign="top" align="left" style="color:#000000; font-family:Arial, Helvetica, sans-serif, 'PT Sans'; font-size:13px;  padding:0px 0px 0px 0;">

                      <table border="0" cellspacing="0" cellpadding="0" align="left" width="100%" bgcolor="#ffffff">
                        <tr>
                          <td style="padding:20px;">
                            <table border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                <td width="35%">
                                  <img src="http://s362172362.onlinehome.fr/mail/adecco/christophe.jpg" alt="">
                                </td>
                                <td width="55%">
                                  <img src="http://s362172362.onlinehome.fr/mail/adecco/edito.png" alt=""><br />
                                  <span style="color:#724c68; font-family: Arial;font-size: 16px;font-weight: 400;text-transform: uppercase;">Christophe Catoir, président</span>
                                </td>
                              </tr>
                            </table>
                            <p style="color: #414042;font-family: Arial;font-weight: 400;font-size: 14px;line-height: 21px;">Le début d'année 2015 a été hélas endeuillé par une vague de violence intolérable envers nos valeurs républicaines, et avec pour effet secondaire une stigmatisation accrue d'une partie de nos concitoyens qui luttent pour s'intégrer dans la société.<br />Au coeur de son engagement pour l'égalité des chances en amont de l'emploi, la Fondation Groupe Adecco a su développer des partenariats plein de sens avec des associations qui oeuvrent au quotidien pour transmettre aux jeunes l'esprit d'entreprendre et une meilleure connaissance du monde.</p>
                          </td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td height="30"></td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td>
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/actualites.png" alt="">
                          </td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td height="30"></td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
                        <tr>
                          <td width="35%">
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/actu.jpg" alt="">
                          </td>
                          <td style="padding:20px;">
                            <h2 style="font-family: Arial;font-weight: 400;color: #724c68;font-size: 18px;line-height: 23px; margin-top:0;">Appels à projets : découvrez nos lauréats</h2>
                            <p style="font-family: Arial;font-weight: 400;color: #414042;font-size: 14px;line-height: 21px;">22 associations soutenues par les signataires de la Chaîne du OUI ont été primées par la Fondation. Au total, 100 000 ? leur seront versés.</p>
                            <a href="#" style="font-family: Arial;font-weight: 400;color:red; text-decoration:none;">LIRE LA SUITE</a>
                          </td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td height="8"></td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
                        <tr>
                          <td width="35%">
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/actu.jpg" alt="">
                          </td>
                          <td style="padding:20px;">
                            <h2 style="font-family: Arial;font-weight: 400;color: #724c68;font-size: 18px;line-height: 23px; margin-top:0;">La Fondation présente au 1er forum des athlètes</h2>
                            <p style="font-family: Arial;font-weight: 400;color: #414042;font-size: 14px;line-height: 21px;">Le 21 janvier dernier s'est tenu à Paris le 1er forum des athlètes de haut niveau organisé par le CNOSF et auquel a participé la Fondation pour présenter son programme en faveur de la reconversion des sportifs.</p>
                            <a href="#" style="font-family: Arial;font-weight: 400;color:red; text-decoration:none;">LIRE LA SUITE</a>
                          </td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td height="8"></td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
                        <tr>
                          <td width="35%">
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/actu.jpg" alt="">
                          </td>
                          <td style="padding:20px;">
                            <h2 style="font-family: Arial;font-weight: 400;color: #724c68;font-size: 18px;line-height: 23px; margin-top:0;">Appels à projets : découvrez nos lauréats</h2>
                            <p style="font-family: Arial;font-weight: 400;color: #414042;font-size: 14px;line-height: 21px;">22 associations soutenues par les signataires de la Chaîne du OUI ont été primées par la Fondation. Au total, 100 000 ? leur seront versés.</p>
                            <a href="#" style="font-family: Arial;font-weight: 400;color:red; text-decoration:none;">LIRE LA SUITE</a>
                          </td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td height="30"></td>
                        </tr>
                      </table>


                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#c8d35d">
                        <tr>
                          <td width="100%;">
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/groupe.jpg" style="width:100%;" class="img_mob" title="" alt="" />
                          </td>
                        </tr>
                        <tr>
                          <td style="padding:20px;">
                            <p style="font-family: Arial;font-weight: 400;color: white;font-size: 18px;line-height: 21px;">Arpejeh : atelier découverte des métiers (Marseille) ou parrainage d'un jeune (France entière)</p>
                            <a href="#" style="font-family: Arial;font-weight: 400;color: #69711f;font-size: 12px;text-transform: uppercase; text-decoration:none;">LIRE LA SUITE</a>
                            <p style="font-family: Arial;font-weight: 400;color: white;font-size: 18px;line-height: 21px;">Arpejeh : atelier découverte des métiers (Marseille) ou parrainage d'un jeune (France entière)</p>
                            <a href="#" style="font-family: Arial;font-weight: 400;color: #69711f;font-size: 12px;text-transform: uppercase; text-decoration:none;">LIRE LA SUITE</a>
                            <p style="font-family: Arial;font-weight: 400;color: white;font-size: 18px;line-height: 21px;">Arpejeh : atelier découverte des métiers (Marseille) ou parrainage d'un jeune (France entière)</p>
                            <a href="#" style="font-family: Arial;font-weight: 400;color: #69711f;font-size: 12px;text-transform: uppercase; text-decoration:none;">LIRE LA SUITE</a>
                          </td>
                        </tr>
                      </table>
                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td height="30"></td>
                        </tr>
                      </table>


                    </td>
                  </tr>
                </table>

                <table width="220" border="0" cellspacing="0" cellpadding="0" align="right">
                  <tr>
                    <td  valign="top" align="left" style="color:#000000; font-family:Arial, Helvetica, sans-serif, 'PT Sans'; font-size:13px;  padding:0px 0px 0px 0;">

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#eb212e">
                        <tr>
                          <td style="padding:20px;">
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/decouvrez.png" alt="">
                            <ul style="padding-left:15px;font-size: 15px;font-weight: 300;line-height: 25px; color:white; font-family: Arial;">
                              <li><a href="#" style="color:white; text-decoration:none;">nos missions</a></li>
                              <li><a href="#" style="color:white; text-decoration:none;">organisations</a></li>
                              <li><a href="#" style="color:white; text-decoration:none;">nos programmes</a></li>
                              <li><a href="#" style="color:white; text-decoration:none;">appels à projets</a></li>
                            </ul>
                          </td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td height="8"></td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#724c68">
                        <tr>
                          <td>
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/temoignage.jpg" class="img_mob"  alt="">
                          </td>
                        </tr>
                        <tr>
                          <td style="padding:20px;">
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/temoignage.png" alt="">
                            <p style="color:white;font-family: Arial;font-size: 18px;font-weight: 400;line-height: 26px;">"C'est une réelle joie, un vrai privilège d'avoir pu vivre cette expérience."</p>
                            <p style="color:white;font-family: Arial;font-size: 14px;font-weight: 400;line-height: 21px;">Retrouvez le témoignage d'Olivier Léon, Responsable des Opérations Nationales Adecco France qui nous fait part de sa récente expérience aux côtés de 100 000 entrepreneurs.</p>
                            <a href="#" style="font-family: Arial;color:white; text-decoration:none;">LIRE LA SUITE</a>
                          </td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td height="30"></td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="">
                        <tr>
                          <td style="padding: 0 8px;">
                            <span style="text-transform: uppercase; color:#a9a9a9;font-family: Arial;font-size: 16px;font-weight: 700;line-height: 26px;text-transform: uppercase;">En 2015, la fondation a renouvelé son partenariat pour&nbsp;:</span>
                          </td>
                        </tr>
                      </table>
                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="">
                        <tr>
                          <td style="padding:20px 10px;" width="30%">
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/2.png" alt="">
                          </td>
                          <td>
                            <span style="color: #454545;font-family: Arial;font-size: 12px;font-weight: 700;line-height: 17px;">ans avec le Comité Paralympique et Sportif Français (CPSF) dans le cadre du PAE.</span>
                          </td>
                        </tr>
                        <tr>
                          <td style="padding:20px 10px;" width="30%">
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/12.png" alt="">
                          </td>
                          <td>
                            <span style="color: #454545;font-family: Arial;font-size: 12px;font-weight: 700;line-height: 17px;">sportifs ont témoigné de cet accompagnement à travers...</span>
                          </td>
                        </tr>
                        <tr>
                          <td style="padding:20px 10px;" width="30%">
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/1.png" alt="">
                          </td>
                          <td>
                            <span style="color: #454545;font-family: Arial;font-size: 12px;font-weight: 700;line-height: 17px;">film co-produit par le Labho, le CNOSF, le CPSF et la Fondation.</span>
                          </td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td height="30"></td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#9b6f8f">
                        <tr>
                          <td>
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/questions-reponses.jpg" class="img_mob"  alt="">
                          </td>
                        </tr>
                        <tr>
                          <td style="padding:20px;">
                            <p style="color: white;font-family: Arial;font-size: 14px;font-weight: 400;line-height: 21px;">Qu'est-ce que le mécénat de compétences et comment y participer au sein du Groupe Adecco ?</p>
                          </td>
                        </tr>
                        <tr>
                          <td align="center" valign="middle">

                              <div>
                              <!--[if mso]>
                                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:50px;v-text-anchor:middle;width:180px;" arcsize="15%" stroke="f" fillcolor="#ffffff">
                                  <w:anchorlock/>
                                  <center>
                                <![endif]-->
                                    <a href="#" style="background-color:#ffffff; border-radius:5px; color:#9b6f8f; display:inline-block; font-family:Arial; font-size:12px; font-weight:600; line-height:50px; text-align:center; text-decoration:none; width:180px; -webkit-text-size-adjust:none;">Mécénat de compétences</a>
                                <!--[if mso]>
                                  </center>
                                </v:roundrect>
                              <![endif]-->
                              </div>

                          </td>
                        </tr>
                        <tr>
                          <td height="30"></td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td height="8"></td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#17b8cb">
                        <tr>
                          <td style="padding:20px 20px 0;">
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/contact.png" alt="">
                          </td>
                        </tr>
                        <tr>
                          <td style="padding:20px;">
                            <a href="#" style="margin-right:4px"><img src="http://s362172362.onlinehome.fr/mail/adecco/mail.png" alt=""></a>
                            <a href="#" style="margin-right:4px"><img src="http://s362172362.onlinehome.fr/mail/adecco/facebook.png" alt=""></a>
                            <a href="#" style="margin-right:4px"><img src="http://s362172362.onlinehome.fr/mail/adecco/twitter.png" alt=""></a>
                            <a href="#" style="margin-right:4px"><img src="http://s362172362.onlinehome.fr/mail/adecco/linkedin.png" alt=""></a>
                          </td>
                        </tr>
                      </table>

                    </td>
                  </tr>
                </table>


              </td>
            </tr>
          </table>


        </td>
      </tr>
    </table>









    <!-- FOOTER -->

    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
      <tr>
        <td>

            <table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="devicewidth" style="">



              <tr>
                <td height="30">&nbsp;</td>
              </tr>
              <tr>
                <td align="center" style="padding: 0 50px 50px; color: #999; font-family:Arial, Helvetica, sans-serif, 'PT Sans'; font-size: 13px; font-weight: 700;">
                  �2015 Groupe Adecco - Tous droits r�serv�s<br />Vous recevez cette newsletter car vous �tes abonn� aux actualit�s de la Fondation Groupe Adecco.<br />Si vous souhaitez vous d�sinscrire, <a href="{OptOutLink}" style="color:#999999;">cliquez ici.</a>
                </td>
              </tr>
            </table>

        </td>
      </tr>
    </table>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

是的,我用侧边栏看到了很多这个问题。你有两个选择。根据这篇博客,您可以摆弄所有填充/边距/边框和一些MSO:https://www.emailonacid.com/blog/article/email-development/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010

或者您可以使用仅用于Outlook的“ghost columns”来排列,如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Fondation Groupe Adecco</title>

<meta  name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0," />

<style type="text/css">

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);

html { width: 100%; }
body {margin:0; padding:0; width:100%; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
img {border:0; -ms-interpolation-mode:bicubic;}

table {table-layout:fixed;}
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }

a:hover {text-decoration:underline !important;}

.images {display:block !important; width:100% !important;}

[style*="Open Sans"] {
    font-family: 'Open Sans', Arial, sans-serif !important
}
[style*="PT Sans"] {
    font-family: 'PT Sans', Arial, sans-serif !important
}

.img_mob {
  width: 100% !important;
}


/* MEDIA QUIRES */

@media only screen and (max-width:640px)

{

    body {width:auto!important;}
    table[class=devicewidth] {width:70%!important;}
    table[class=devicewidth] table {width:100%!important;}
  img.resize {max-width: 100%!important;}

}



@media only screen and (max-width:480px)

{

    table[class=devicewidth] {width:320px!important;}
  .full {display:block;width:100%;}

  * {
    -webkit-text-size-adjust: none !important;
  }
  table[class="none"], tr[class="none"], td[class="none"], br[class="none"], span[class="none"] {
    display: none !important;
  }
  *[class].table {
    width: 320px !important;
  }
  *[class].small {
    display: block !important;
    width: 320px !important;
    overflow: visible !important;
    float: none !important;
    height: auto !important;
  }
  *[class].solutions {
    width: 320px !important;
    height: 279px !important;
  }
  *[class].groupe {
    width: 320px !important;
    height: 180px !important;
  }
  .none {
    display: none !important;
  }


}

</style>

</head>

<body topmargin="0" rightmargin="0" bottommargin="0" leftmargin="0">

    <!-- PRE HEADER -->

    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#eb212e">
      <tr>
        <td>

            <table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="devicewidth" style="">
              <tr>
                <td valign="middle" height="" style="padding:10px 1px 10px;">

                    <table width="280" border="0" cellspacing="0" cellpadding="0" align="left">
                      <tr>
                        <td align="left" style="color: #f2c5c8;font-family: Arial;font-size: 12px;font-weight: 400;  padding:0px 1px 0px 0;">
                          <b>Newsletter Fondation groupe Adecco</b>
                        </td>
                      </tr>
                    </table>

                    <table width="400" border="0" cellspacing="0" cellpadding="0" align="right">
                      <tr>
                        <td align="left" style="color: #f2c5c8;font-family: Arial;font-size: 12px;font-weight: 400; padding:0px 1px 0px 0;">
                          Si vous avez des difficult�s pour visualiser ce message. <a href="{MirrorPage}" style="color:#f2c5c8; text-decoration:none;">Cliquez ici</a>
                        </td>
                      </tr>
                    </table>

                </td>
              </tr>
            </table>

        </td>
      </tr>
    </table>

    <!-- ESPACE -->

    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
      <tr>
        <td height="30">&nbsp;</td>
      </tr>
    </table>

    <!-- HEADER -->

    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
      <tr>
        <td>

          <table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="devicewidth" style="">
            <tr>
              <td valign="middle" height="">

                <table width="700" border="0" cellspacing="0" cellpadding="0" align="left">
                  <tr>

                    <td align="center" valign="top"><a href="#" target="_blank" style="outline:none"><img src="http://s362172362.onlinehome.fr/mail/adecco/head.jpg" width="700" height="165" style="display:block" border="0" title="Adecco vous propose ses solutions" alt="Adecco vous propose ses solutions" class="none"></a><!--[if !mso]><!-- -->
                 <a href="#" target="_blank" style="outline:none"><img src="http://s362172362.onlinehome.fr/mail/adecco/head_mob.jpg" width="0" height="0" class="small block hide solutions" border="0" style="width:0px; overflow:hidden; float:left; display:none; line-height:0px; margin:0; padding:0;" alt="Adecco vous propose ses solutions" title="Adecco vous propose ses solutions"></a>
                  <!--<![endif]--></td>
                  </tr>
                </table>


              </td>
            </tr>
          </table>


        </td>
      </tr>
    </table>


    <!-- ESPACE -->

    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
      <tr>
        <td height="8"></td>
      </tr>
    </table>

    <!-- HEADER -->

    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3" valign="top">
      <tr>
        <td>

          <table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="devicewidth" style="">
            <tr>
              <td valign="middle" height="">

                <!--[if (gte mso 9)|(IE)]>
                <table width="100%" style="border-spacing:0;" >
                <tr>
                <td width="700" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
                <![endif]-->

                <table width="460" border="0" cellspacing="0" cellpadding="0" align="left">
                  <tr>
                    <td valign="top" align="left" style="color:#000000; font-family:Arial, Helvetica, sans-serif, 'PT Sans'; font-size:13px;  padding:0px 0px 0px 0;">

                      <table border="0" cellspacing="0" cellpadding="0" align="left" width="100%" bgcolor="#ffffff">
                        <tr>
                          <td style="padding:20px;">
                            <table border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                <td width="35%">
                                  <img src="http://s362172362.onlinehome.fr/mail/adecco/christophe.jpg" alt="">
                                </td>
                                <td width="55%">
                                  <img src="http://s362172362.onlinehome.fr/mail/adecco/edito.png" alt=""><br />
                                  <span style="color:#724c68; font-family: Arial;font-size: 16px;font-weight: 400;text-transform: uppercase;">Christophe Catoir, président</span>
                                </td>
                              </tr>
                            </table>
                            <p style="color: #414042;font-family: Arial;font-weight: 400;font-size: 14px;line-height: 21px;">Le début d'année 2015 a été hélas endeuillé par une vague de violence intolérable envers nos valeurs républicaines, et avec pour effet secondaire une stigmatisation accrue d'une partie de nos concitoyens qui luttent pour s'intégrer dans la société.<br />Au coeur de son engagement pour l'égalité des chances en amont de l'emploi, la Fondation Groupe Adecco a su développer des partenariats plein de sens avec des associations qui oeuvrent au quotidien pour transmettre aux jeunes l'esprit d'entreprendre et une meilleure connaissance du monde.</p>
                          </td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td height="30"></td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td>
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/actualites.png" alt="">
                          </td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td height="30"></td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
                        <tr>
                          <td width="35%">
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/actu.jpg" alt="">
                          </td>
                          <td style="padding:20px;">
                            <h2 style="font-family: Arial;font-weight: 400;color: #724c68;font-size: 18px;line-height: 23px; margin-top:0;">Appels à projets : découvrez nos lauréats</h2>
                            <p style="font-family: Arial;font-weight: 400;color: #414042;font-size: 14px;line-height: 21px;">22 associations soutenues par les signataires de la Chaîne du OUI ont été primées par la Fondation. Au total, 100 000 ? leur seront versés.</p>
                            <a href="#" style="font-family: Arial;font-weight: 400;color:red; text-decoration:none;">LIRE LA SUITE</a>
                          </td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td height="8"></td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
                        <tr>
                          <td width="35%">
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/actu.jpg" alt="">
                          </td>
                          <td style="padding:20px;">
                            <h2 style="font-family: Arial;font-weight: 400;color: #724c68;font-size: 18px;line-height: 23px; margin-top:0;">La Fondation présente au 1er forum des athlètes</h2>
                            <p style="font-family: Arial;font-weight: 400;color: #414042;font-size: 14px;line-height: 21px;">Le 21 janvier dernier s'est tenu à Paris le 1er forum des athlètes de haut niveau organisé par le CNOSF et auquel a participé la Fondation pour présenter son programme en faveur de la reconversion des sportifs.</p>
                            <a href="#" style="font-family: Arial;font-weight: 400;color:red; text-decoration:none;">LIRE LA SUITE</a>
                          </td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td height="8"></td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
                        <tr>
                          <td width="35%">
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/actu.jpg" alt="">
                          </td>
                          <td style="padding:20px;">
                            <h2 style="font-family: Arial;font-weight: 400;color: #724c68;font-size: 18px;line-height: 23px; margin-top:0;">Appels à projets : découvrez nos lauréats</h2>
                            <p style="font-family: Arial;font-weight: 400;color: #414042;font-size: 14px;line-height: 21px;">22 associations soutenues par les signataires de la Chaîne du OUI ont été primées par la Fondation. Au total, 100 000 ? leur seront versés.</p>
                            <a href="#" style="font-family: Arial;font-weight: 400;color:red; text-decoration:none;">LIRE LA SUITE</a>
                          </td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td height="30"></td>
                        </tr>
                      </table>


                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#c8d35d">
                        <tr>
                          <td width="100%;">
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/groupe.jpg" style="width:100%;" class="img_mob" title="" alt="" />
                          </td>
                        </tr>
                        <tr>
                          <td style="padding:20px;">
                            <p style="font-family: Arial;font-weight: 400;color: white;font-size: 18px;line-height: 21px;">Arpejeh : atelier découverte des métiers (Marseille) ou parrainage d'un jeune (France entière)</p>
                            <a href="#" style="font-family: Arial;font-weight: 400;color: #69711f;font-size: 12px;text-transform: uppercase; text-decoration:none;">LIRE LA SUITE</a>
                            <p style="font-family: Arial;font-weight: 400;color: white;font-size: 18px;line-height: 21px;">Arpejeh : atelier découverte des métiers (Marseille) ou parrainage d'un jeune (France entière)</p>
                            <a href="#" style="font-family: Arial;font-weight: 400;color: #69711f;font-size: 12px;text-transform: uppercase; text-decoration:none;">LIRE LA SUITE</a>
                            <p style="font-family: Arial;font-weight: 400;color: white;font-size: 18px;line-height: 21px;">Arpejeh : atelier découverte des métiers (Marseille) ou parrainage d'un jeune (France entière)</p>
                            <a href="#" style="font-family: Arial;font-weight: 400;color: #69711f;font-size: 12px;text-transform: uppercase; text-decoration:none;">LIRE LA SUITE</a>
                          </td>
                        </tr>
                      </table>
                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td height="30"></td>
                        </tr>
                      </table>


                    </td>
                  </tr>
                </table>

                <!--[if (gte mso 9)|(IE)]>
                </td><td width="220" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
                <![endif]-->

                <table width="220" border="0" cellspacing="0" cellpadding="0" align="right">
                  <tr>
                    <td  valign="top" align="left" style="color:#000000; font-family:Arial, Helvetica, sans-serif, 'PT Sans'; font-size:13px;  padding:0px 0px 0px 0;">

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#eb212e">
                        <tr>
                          <td style="padding:20px;">
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/decouvrez.png" alt="">
                            <ul style="padding-left:15px;font-size: 15px;font-weight: 300;line-height: 25px; color:white; font-family: Arial;">
                              <li><a href="#" style="color:white; text-decoration:none;">nos missions</a></li>
                              <li><a href="#" style="color:white; text-decoration:none;">organisations</a></li>
                              <li><a href="#" style="color:white; text-decoration:none;">nos programmes</a></li>
                              <li><a href="#" style="color:white; text-decoration:none;">appels à projets</a></li>
                            </ul>
                          </td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td height="8"></td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#724c68">
                        <tr>
                          <td>
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/temoignage.jpg" class="img_mob"  alt="">
                          </td>
                        </tr>
                        <tr>
                          <td style="padding:20px;">
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/temoignage.png" alt="">
                            <p style="color:white;font-family: Arial;font-size: 18px;font-weight: 400;line-height: 26px;">"C'est une réelle joie, un vrai privilège d'avoir pu vivre cette expérience."</p>
                            <p style="color:white;font-family: Arial;font-size: 14px;font-weight: 400;line-height: 21px;">Retrouvez le témoignage d'Olivier Léon, Responsable des Opérations Nationales Adecco France qui nous fait part de sa récente expérience aux côtés de 100 000 entrepreneurs.</p>
                            <a href="#" style="font-family: Arial;color:white; text-decoration:none;">LIRE LA SUITE</a>
                          </td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td height="30"></td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="">
                        <tr>
                          <td style="padding: 0 8px;">
                            <span style="text-transform: uppercase; color:#a9a9a9;font-family: Arial;font-size: 16px;font-weight: 700;line-height: 26px;text-transform: uppercase;">En 2015, la fondation a renouvelé son partenariat pour&nbsp;:</span>
                          </td>
                        </tr>
                      </table>
                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="">
                        <tr>
                          <td style="padding:20px 10px;" width="30%">
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/2.png" alt="">
                          </td>
                          <td>
                            <span style="color: #454545;font-family: Arial;font-size: 12px;font-weight: 700;line-height: 17px;">ans avec le Comité Paralympique et Sportif Français (CPSF) dans le cadre du PAE.</span>
                          </td>
                        </tr>
                        <tr>
                          <td style="padding:20px 10px;" width="30%">
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/12.png" alt="">
                          </td>
                          <td>
                            <span style="color: #454545;font-family: Arial;font-size: 12px;font-weight: 700;line-height: 17px;">sportifs ont témoigné de cet accompagnement à travers...</span>
                          </td>
                        </tr>
                        <tr>
                          <td style="padding:20px 10px;" width="30%">
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/1.png" alt="">
                          </td>
                          <td>
                            <span style="color: #454545;font-family: Arial;font-size: 12px;font-weight: 700;line-height: 17px;">film co-produit par le Labho, le CNOSF, le CPSF et la Fondation.</span>
                          </td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td height="30"></td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#9b6f8f">
                        <tr>
                          <td>
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/questions-reponses.jpg" class="img_mob"  alt="">
                          </td>
                        </tr>
                        <tr>
                          <td style="padding:20px;">
                            <p style="color: white;font-family: Arial;font-size: 14px;font-weight: 400;line-height: 21px;">Qu'est-ce que le mécénat de compétences et comment y participer au sein du Groupe Adecco ?</p>
                          </td>
                        </tr>
                        <tr>
                          <td align="center" valign="middle">

                              <div>
                              <!--[if mso]>
                                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:50px;v-text-anchor:middle;width:180px;" arcsize="15%" stroke="f" fillcolor="#ffffff">
                                  <w:anchorlock/>
                                  <center>
                                <![endif]-->
                                    <a href="#" style="background-color:#ffffff; border-radius:5px; color:#9b6f8f; display:inline-block; font-family:Arial; font-size:12px; font-weight:600; line-height:50px; text-align:center; text-decoration:none; width:180px; -webkit-text-size-adjust:none;">Mécénat de compétences</a>
                                <!--[if mso]>
                                  </center>
                                </v:roundrect>
                              <![endif]-->
                              </div>

                          </td>
                        </tr>
                        <tr>
                          <td height="30"></td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
                        <tr>
                          <td height="8"></td>
                        </tr>
                      </table>

                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#17b8cb">
                        <tr>
                          <td style="padding:20px 20px 0;">
                            <img src="http://s362172362.onlinehome.fr/mail/adecco/contact.png" alt="">
                          </td>
                        </tr>
                        <tr>
                          <td style="padding:20px;">
                            <a href="#" style="margin-right:4px"><img src="http://s362172362.onlinehome.fr/mail/adecco/mail.png" alt=""></a>
                            <a href="#" style="margin-right:4px"><img src="http://s362172362.onlinehome.fr/mail/adecco/facebook.png" alt=""></a>
                            <a href="#" style="margin-right:4px"><img src="http://s362172362.onlinehome.fr/mail/adecco/twitter.png" alt=""></a>
                            <a href="#" style="margin-right:4px"><img src="http://s362172362.onlinehome.fr/mail/adecco/linkedin.png" alt=""></a>
                          </td>
                        </tr>
                      </table>

                    </td>
                  </tr>
                </table>
                <!--[if (gte mso 9)|(IE)]>
                </td>
                </tr>
                </table>
                <![endif]-->

              </td>
            </tr>
          </table>


        </td>
      </tr>
    </table>

    <!-- FOOTER -->

    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
      <tr>
        <td>

            <table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="devicewidth" style="">



              <tr>
                <td height="30">&nbsp;</td>
              </tr>
              <tr>
                <td align="center" style="padding: 0 50px 50px; color: #999; font-family:Arial, Helvetica, sans-serif, 'PT Sans'; font-size: 13px; font-weight: 700;">
                  �2015 Groupe Adecco - Tous droits r�serv�s<br />Vous recevez cette newsletter car vous �tes abonn� aux actualitis de la Fondation Groupe Adecco.<br />Si vous souhaitez vous disinscrire, <a href="{OptOutLink}" style="color:#999999;">cliquez ici.</a>
                </td>
              </tr>
            </table>

        </td>
      </tr>
    </table>

</body>
</html>

“鬼列”只是隐藏在条件标签中的表格,使其显示为两个相邻的TD。