2016-12-18 9 views
0

私は自分用のhtml署名を作成しています。 背景と画像の重なり合ったtd要素を実現したい。 私はそれを達成することができなかったので、私はそれを達成するために背景と画像を使用することに決めました。私が得たものhtml表gmailの署名の不要な埋め込み

GMAIL

enter image description here

imageがコンテナよりも小さく、かつ部分的背景を持っている)

間の不要なパディング(3px)がありますtdとimgタグ。

ブラウザ

enter image description here

コード:

<table width="363" height="130" border="0" cellpadding="0" cellspacing="0" rules="none" > 
<tr> 
    <!-- This row is needed to enforce col widths in Outlook --> 
    <td width="40"> 
    </td> 
    <td width="3"> 
    </td> 
    <td width="10"> 
    </td> 
    <td width="100"> 
    </td> 
    <td width="10"> 
    </td> 
</tr> 
<tr> 
    <td width="40" valign="middle" height="130" colspan="1" bgcolor="#417dc0" nowrap style="width: 40px; vertical-align: middle; height: 130px; column-span: 1; background-color: #417dc0; white-space: nowrap;"> 
     <div style="margin-bottom: 5px;text-align: center;"> 
      <a href="https://www.facebook.com/fernando.n.candiani" target="_blank"><img src="http://fernandocandiani.com.br/email/facebook.png" width="20" height="20"></a> 
     </div> 
     <div style="margin-bottom: 5px;text-align: center;"> 
      <a href="https://www.linkedin.com/in/fernandocandiani" target="_blank"><img src="http://fernandocandiani.com.br/email/linkedin.png" width="20" height="20"></a> 
     </div> 
     <div style="text-align: center;"> 
      <a href="https://plus.google.com/110769302461961049884" target="_blank"><img src="http://fernandocandiani.com.br/email/googleplus.png" width="20" height="20"></a> 
     </div> 
    </td> 
    <td width="3" valign="middle" colspan="1" height="130" bgcolor="#417dc0" nowrap style="width: 3px; vertical-align: middle; height: 130px; column-span: 1; background-color: #417dc0; white-space: nowrap;"> 
     <div style="border-right:2px solid #ffffff;height:100px"></div> 
    </td> 
    <td width="10" valign="middle" colspan="1" height="130" bgcolor="#417dc0" nowrap style="width: 10px; vertical-align: middle; height: 130px; column-span: 1; background-color: #417dc0; white-space: nowrap;"> 
    </td> 
    <td width="100" valign="middle" height="130" colspan="1" bgcolor="#ffffff" nowrap style="width: 85px; vertical-align: middle; height: 130px; column-span: 1; background-color: #ffffff; white-space: nowrap;"> 
     <img width="100" height="130" src="http://fernandocandiani.com.br/email/[email protected]"> 
    </td> 
    <td width="10" valign="middle" colspan="1" height="130" bgcolor="#ffffff" nowrap style="width: 10px; vertical-align: middle; height: 130px; column-span: 1; background-color: #ffffff; white-space: nowrap;"> 
    </td> 
</tr> 

を多くのアプローチを試してみましたが、それが働いて得ることができませんでした。

PS:ストレートブラウザでレンダリングするときには、クロム、FirefoxとOperaで完璧に動作しますが、Gmailの署名に貼り付けたときに、それは3pxのパディング/マージン

EDIT追加されます:それは言及する価値がある場合、私はしません をテーブルの高さは133pxで、コードには130pxの画像があります。テーブルには130pxのコードも必要です。私が133pxにイメージを上げると、テーブルは136pxになります。

+0

多分imgにはパディングまたはボーダーがあります。ボーダーをnoneに設定し、0にパディングしてください。 – JamieD77

+0

No luck!私はそれが言及する価値がある場合は、テーブルは133pxの高さがあり、コードは言うように画像は130pxを持っていません。テーブルには130pxのコードも必要です。私が133pxにイメージを上げると、テーブルは136pxになります。 – candiani

答えて

関連する問題