0

I am making a HTML newsletter and keep running into this problem. The image at the top for some reason ignores the margin and gives an ugly white line.

While this site says that email clients should accept margin's: http://www.campaignmonitor.com/css/

Does anyone know how to fix this?

Edit: new and cleaner code, but still same problem! I have no idea how to get that damn thing down. =/ (also my left border is gone now, and I don't know why)

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:kaiser@strw.leidenuniv.nl">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">
4

2 回答 2

1

Remember with HTML emails you need to go very much 'old-school' as the email clients that render them are even more archaic than even old versions of IE. Therefore, try to remember back to the days before DIVs and lovely CSS layouts, back to the days when tables were for layout...

Try adding:

cellpadding="0" cellspacing="0"

to your table declaration then consider putting your content in a table within the main table as opposed to two tables stacked on top of one another. Or, if you can, rationalise the three columns and create one single table.

于 2013-10-04T08:08:59.573 回答
1

You need display:block; on your image. Here is an example of how all images should look in html email:

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

Some additional notes:

  • You don't need <center>, use <td align="center"> instead.
  • You shouldn't use px in the width="" declarations. Example: width="150"
  • Declare background color only in a table or table cell using bgcolor method. Example: bgcolor="#DBDBDB"
于 2013-10-04T12:38:52.797 回答