CODEWITHSUNDEEP
htmlcssemailspacing
AndrewDelphiki
AndrewDelphiki

Reputation: 3

Odd spaces in html email

I am making HTML Emails for some marketing my company is doing. I cant for the life of me figure out the gaps in the bottom of my table. I have nested tables as is protocol for optimization with all email clients. I cant use crazy css, has to be inline or embedded (my platform will run embedded css inline.

my code is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Laser Vision Care Center Wants To Help You See More Clearly</title>

<style type="text/css">

    table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 0;
        background:#d7bd83;



    }


</style>

</head>

<body>  
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" style="background:#e6cc89;color:#fff;font-family:Arial, Helvetica, sans-serif; font-size:12px">

        <tr cellpadding="0" cellspacing="0">
            <td cellpadding="0" cellspacing="0">
            </td>
            <tr cellpadding="0" cellspacing="0">
                <td cellpadding="0" cellspacing="0" valign="middle" style="background:#e0c788;text-align:center;font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;color:#222961;font-weight:Bold;font-size:20px">"Our Focus Is On The Health Of Your Eyes"</td>
                </tr>
                <tr cellpadding="0" cellspacing="0">
                    <td width="600" cellpadding="0" cellspacing="0">
                        <img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/BannerImage.jpg">
                    </td>
                </tr>
                <tr cellpadding="0" cellspacing="0">
                    <td cellpadding="0" cellspacing="0">
                        <table width="600" cellpadding="0" cellspacing="0">
                            <tr cellpadding="0" cellspacing="0">
                                <td cellpadding="0" cellspacing="0" width="232">
                                    <img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ArrowTop.jpg">
                                </td>
                                <td cellpadding="0" cellspacing="0" width="368" align="right" style="background:#e6cc89;"><p><span style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;font-weight:400;font-size:22px;color:#6f6f6f;margin-right:20px;">WAKE UP TO CLEAR VISION WITH</span><br>
<span style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;font-weight:400;font-size:27px;color:#6f6f6f;margin-right:20px;">ALL LASER CUSTOM LASIK</span></p>

                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            <tr>
                    <td cellpadding="0" cellspacing="0">
                        <table width="600" cellpadding="0" cellspacing="0">
                            <tr>
                                <td cellpadding="0" cellspacing="0" width="232">
                                    <img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ArrowSecond.jpg">
                                </td>
                                <td cellpadding="0" cellspacing="0" width="368">
                                    <img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ClickHere.jpg">

                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            <tr>
                <td cellpadding="0" cellspacing="0">
                    <table width="600" cellpadding="0" cellspacing="0">
                        <tr cellpadding="0" cellspacing="0" style="background:#e6cc89;">
                            <td cellpadding="0" cellspacing="0" width="231">
                                <img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ArrowThird.jpg">
                            </td>
                            <td cellpadding="0" valign="top" cellspacing="0" width="369" align="right" style="top-margin:0;"><a href="tel:1-313-724-2733" style="text-decoration:none;"><span style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;font-weight:400;font-size:31px;color:#3d3e3e;">or call (313) 724-2733</span></a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        <tr cellpadding="0" cellspacing="0">
            <td width="600" cellpadding="0" cellspacing="0">
                <img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ArrowFouth.jpg">
            </td>
        </tr>
        <tr>
                <td cellpadding="0" cellspacing="0">
                    <table cellpadding="0" cellspacing="0">
                        <tr cellpadding="0" cellspacing="0" style="background:#e6cc89;">
                            <td cellpadding="0" cellspacing="0" width="222" align="left">
                                <img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ArrowFifth.jpg">
                            </td>
                        </tr>
                    </table>
                    <tr cellpadding="0" cellspacing="0">
                        <td width="600" align="center">
                            <table cellpadding="0" cellspacing="15">
                                <tr>
                                <td width="41">
                                    <a href="#"><img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/Facebook.jpg"></a>
                                </td>
                                <td width="40" cellpadding="0" cellspacing="0">
                                    <a href="#"><img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/Twitter.jpg"></a>
                                </td>
                                <td width="41" cellpadding="0" cellspacing="0">
                                    <a href="#"><img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/Instagram.jpg"></a>
                                </td>
                                </tr>
                            </table>
                            <tr cellpadding="0" cellspacing="0">
                                <td cellpadding="0" cellspacing="0" style="text-align:center;">
                                    <a href="http://www.lvccenter.com" style="text-decoration:none;"><span style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;text-weight:400;font-size:12px;color:#6f6f6f;">www.lvccenter.com</span></a>
                                </td>
                            </tr>
                            <tr>
                                <td cellpadding="0" cellspacing="0" style="text-align:center;">
                                    <p><span style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;text-weight:400;font-size:10px;color:#6f6f6f;">23522 Michigan Avenue Dearborn, MI 48124</span></p>
                                </td>
                            </tr>






    </table>
</body>
</html>

Upvotes: 0

Views: 139

Answers (1)

nochkin
nochkin

Reputation: 710

Your first gap is because one of your p tags uses default margins. Make it <p style="margin:0;"> to have it fixed (that's line #47).

The second gap is because you have two images with different heights: ArrowSecond.jpg is 73px, while ClickHere.jpg is 74px. You need to make them matched for the table row to align.

P.S.: your html needs some little fixes. Try to feed it into html validator.

P.S.2: words "WAKE" and "ALL" are not lined up vertically.

Upvotes: 1

Related Questions