Таблица наложения изображений в информационном бюллетене html

Я составляю информационный бюллетень HTML и постоянно сталкиваюсь с этой проблемой. Изображение наверху почему-то игнорирует маржу и дает уродливую белую линию.Таблица наложения изображений в информационном бюллетене html

Хотя этот сайт говорит, что почтовые клиенты должны принять запас-х: http://www.campaignmonitor.com/css/

Кто-нибудь знает, как это исправить?

Редактировать: новый и более чистый код, но все та же проблема! Я понятия не имею, как это проклятое. =/(И моя левая граница исчезла, и я не знаю, почему)

enter image description here

<table cellspacing="0" cellpadding="0" width="811px" style="border:0px solid black;border-collapse:collapse"> 
    <tr> 
      <td width="150px" VALIGN=TOP style="border-bottom: 1px solid #000000;">Nieuwsbrief #<?php echo $nr; ?></td> 
      <td width="500px" style="vertical-align: bottom;"><img src="http://pietrow.net/newsletter/images/lad_wide.png" style="z-index:-1;"></img></td> 
      <td width="150px" align="right" style="vertical-align: top; border-bottom: 1px solid #000000;" >Datum: <?php echo $datum; ?></td> 
    </tr> 
    <tr style="background: #DBDBDB; border: 1px solid #000000; border-top: 0px" width="811px"> 
      <td width="270px"><center><a href="http://home.strw.leidenuniv.nl/~kaiser/">Website</a></center></td> 
      <td width="271px"><center><a href="https://www.facebook.com/LADKaiser">Facebook</a></center></td> 
      <td width="270px"><center><a href="mailto:[email protected]">Contact</a></center></td> 
    </tr> 
    <tr style="background: #DBDBDB; border:0px; border-left: 1px solid #000000; border-right: 1px solid #000000;" width="811px"> 
      <td colspan="3" width="811px"><center><a href="#ENTOP">**ENGLISH VERSION BELOW**</a></center></td> 
    </tr> 
    <tr > 
      <td style="background: #DBDBDB; border: 1px solid #000000; border-bottom: 0px;" colspan="3" width="811px">

источник

2013-10-04 Coolcrab

Помните с HTML писем вы должны идти очень много «старой школы», как по электронной почте клиенты, которые их делают, еще более архаичны, чем даже старые версии IE. Поэтому постарайтесь запомнить обратно в дни перед DIVs и прекрасные макеты CSS, обратно в те дни, когда столы были для верстки ...

Попробуйте добавить:

cellpadding="0" cellspacing="0"

к вашей декларации таблицы затем рассмотреть вопрос о создании ваш контент в таблице в пределах основной стол в отличие от двух таблиц, уложенных друг на друга. Или, если можно, рационализируйте три столбца и создайте одну таблицу.

источник

2013-10-04 08:08:59

Не работает. : P Проблема, с которой я столкнулась, вставляя все в один стол, заключается в том, что верхняя коробка должна быть белой и без полей, а материал ниже серых и имеет границы. (есть ли способ сделать это?) – Coolcrab

Применить встроенные стили к ячейкам таблицы, которые вы хотите использовать с границами/фонами. Это длительный способ сделать это, но это проблема с HTML-сообщениями электронной почты. –

Посмотрите на эту скрипку: http://jsfiddle.net/dJJNm/ –

Вам необходимо display:block; на вашем изображении. Вот пример того, как все изображения должны выглядеть в HTML электронной почты:

<img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="" height="" alt="">

Некоторые дополнительные примечания:

Вам не нужно <center>, используйте <td align="center"> вместо этого.
Вы не должны использовать px в объявлениях width="". Пример: width="150"
Объявлять цвет фона только в таблице или ячейке таблицы с использованием метода bgcolor. Пример: bgcolor="#DBDBDB"

источник

2013-10-04 12:38:52 John

Кроме того, если это изображение можно щелкнуть, обязательно включите –

@RLacorne Я никогда не обнаружил необходимость в 'border =" 0 "' в теге гиперссылки - какой клиент вы считаете источником вдохновения для этого ? – John

Программное обеспечение Microsoft Outlook 2002 в Windows XP отображает границу синего канала 2-3px, если граница = «0» не включена. Хотя мне кажется, что никто больше не использует это программное обеспечение, в том числе border = «0», это хорошая привычка, поскольку некоторые люди все еще живут в прошлом, когда дело доходит до компьютеров. :) –

Таблица наложения изображений в информационном бюллетене html

ответ

Смежные вопросы