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

0

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

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

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

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

Изображение 174551

<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">
Теги:
html-table
email
html-email

2 ответа

1
Лучший ответ

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

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

cellpadding="0" cellspacing="0"

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

Поделиться
  • 0
    Это не работает. : P У меня была проблема с тем, чтобы поместить все в одну таблицу: верхний блок должен быть белым и без полей, в то время как материал под ним серый и имеет границы. (Есть ли способ сделать это?)
  • 1
    Примените встроенные стили к нужным ячейкам таблицы с границами / фонами. Это долгий путь, но проблема в электронных письмах HTML.
Показать ещё 8 комментариев
1

Вам нужно 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"
Поделиться
  • 0
    Кроме того, если на это изображение можно кликнуть, обязательно включите <img src = "" border = "0" />
  • 0
    @RLacorne Я никогда не находил необходимость в border="0" в теге гиперссылки с изображением - какой клиент вы нашли для этого источником вдохновения?
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню