Я строю html-подпись для себя. Я хочу получить перекрывающий элемент td с фоном и изображением. Я не мог заставить его работать, поэтому я решил использовать изображение с фоном для достижения этого.Нежелательная прокладка в html-таблице gmail-подпись
Что я получил:
GMAIL
(The image меньше емкости и имеет частичный фон)
Существует нежелательный обивка (3px) между td и img.
БРАУЗЕР
Код:
<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: Он отлично работает в Chrome, Firefox и Opera, когда оказывается прямо в браузере, но при вставке в GMAIL подписи он добавляет 3px отступы/Маржинальная
EDIT: я не стоит ли упоминать но таблица имеет высоту 133 пикселя, а изображение имеет 130 пикселей, как говорит код. В таблице также должно быть 130px по коду. Если я увеличу изображение до 133px, таблица перейдет к 136px и так далее.
Возможно, у img есть прокладка или граница .. установить границу на ничто и отложить до 0 и посмотреть – JamieD77
Не повезло! Я не хочу, если это стоит упомянуть, но таблица имеет высоту 133 пикселя, а изображение имеет 130 пикселей, как говорит код. В таблице также должно быть 130px по коду. Если я увеличу изображение до 133px, таблица перейдет к 136px и так далее. – candiani