Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    405
    Thanks
    17
    Thanked 2 Times in 2 Posts

    PLease help. Gap wont go away

    I have what should be an IDIOT simple table design (no, I cannot do this with divs. It'll be an email)

    I have a gap in two stacked tables that will not go away. Please, somebody look at this and tell me what they can see?

    Code:
    <html>
         <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <meta name="description" content="Get up to $325 off, Switching to Monex, in August 2013!">
            <title>Get up to $325 off, Switching to Monex!</title>
        </head>
    <body>
       
    <table width="100%" cellpadding=0 cellspacing=0 style="border-collapse:collapse;">
     <tr>
      <td align="center" valign="top">
    
    
        <table cellpadding="0" cellspacing="0" width="600" style="background-color:#ffedae;border-collapse:collapse;">
            <tr>
                <td>
               <img src="images/transp.gif" style="width:311px;height:1px;" width="311" height="1">
    
                <p style="font-family:arial;padding:0px;margin:0px;margin-auto:0px;line-height:20px;font-size:32px;font-weight:700;">
                <img src="images/transp.gif" style="width:27px;height:1px;" width="27">
                    <a href="http://www.monexgroup.com/promotion325off/" style="text-decoration:none;color:#b81d22;">
                GET UP TO
                </a>
                </p>
    
            <p style="font-family:arial;padding:0px;margin:0px;margin-auto:0px;line-height:37px;font-size:40px;font-weight:900;color:#d2232a;">
            <img src="images/transp.gif" style="width:27px;height:1px;" width="27">
            
                <a href="http://www.monexgroup.com/promotion325off/" style="text-decoration:none;color:#d2232a;">
                $325 OFF<font color="grey">*</font>
                </a>
            
            </p>
            
            
    <p style="font-family:arial;padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:18px;font-size:17px;font-weight:700;color:#0078c3;">
    
            <img src="images/transp.gif" style="width:32px;height:1px;" width="27">
            
                <a href="http://www.monexgroup.com/promotion325off/" style="text-decoration:none;color:#0078c3;">
                when you switch to Stress-Free
                </a>
          
            <br>
    </p>
            
    <p style="font-family:arial;padding:0px;margin:0px;margin-auto:0px;line-height:18px;font-size:17px;font-weight:700; color:#00509f;">
    
            <img src="images/transp.gif" style="width:32px;height:1px;" width="27">
           
                <a href="http://www.monexgroup.com/promotion325off/" style="text-decoration:none;color:#00509f;">
                 Payment Processing with
                </a>
    
    </p>
            <img src="images/transp.gif" style="width:32px;height:21px;" width="12" height="10">
            <a href="http://www.monexgroup.com/promotion325off/"><img src="images/monex_logo.gif" border="0" width="140" style="width:140px;border:0;"></a>
                </td>
                <td>
                <a href="http://www.monexgroup.com/promotion325off/" border="0"> <img src="images/side1a.gif" style="width:287px; height:194px;"> </a>
              </td>
            </tr>
        </table>
        
         <table cellpadding="0" border="1" cellspacing="0" width="600" style="background-color:#ffedae;border-collapse:collapse;">
            <tr>
                <td>
                 
                    <table cellpadding="0" cellspacing="0" width="100%" border="0">
                        <tr>
                            <td width="143">
                                <a href="http://www.monexgroup.com/promotion325off/" border="0"><img src="images/monex-machine.gif"></a>
                            </td>
                            
                            <td width="223">
                                <img src="images/transp.gif" style="width:140px;height:5px;" width="140" height="5">
                                <br>
                                <font face="arial" color="#00509f" style="font-size:1.2em; font-weight:500;line-height:18px;"><b>Call us at</b>
                                <br>
                                <font color="#d2232a" style="font-size:24px;font-weight:700;line-height:21px;">
                                <b>1-855-545-0255</b>
                                </font>
                                <br>
            
                                <font style="font-size:16px;font-weight:500;line-height:18px;"><a href="http://www.monexgroup.com/promotion325off/" style="text-decoration:none;color:#00509f;">
                                or visit us online </a><img src='images/arrow.gif'>
                                <br>
                                before August 26, 2013
                                </font>
                                </font>
                            </td>
                        </tr>
                    </table>
                 
                 
                </td>
                <td>
                <a href="http://www.monexgroup.com/promotion325off/" border="0"> <img src="images/side1b.gif"> </a>
                </td>
            </tr>
        </table>
    
    
    
    
      </td>
     </tr>
    </table>
      
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Jul 2013
    Location
    Netherlands
    Posts
    20
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Hi there,


    I do not see a gap, but it might show once the images load:

    http://jsfiddle.net/sAYnq/


    Do you have a public URL with images?

  • #3
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Ugh, I hate HTML emails. Anyway, I can't tell from what's going on with the fiddle, but I think I can guess as to what's happening.

    Some email clients strip your DOCTYPE declaration so I guess that's why you didn't declare a doctype. But, if a page has a strict DOCTYPE, images will have this "gap" beneath them. One solution is to set the image as a block-level element:

    Code:
    img {display:block}
    I would suggest reading more about that here. It talks about "images, tables, and mysterious gaps".
    My signature :)

  • #4
    New Coder
    Join Date
    Jul 2013
    Posts
    39
    Thanks
    0
    Thanked 2 Times in 2 Posts
    what gap? I don't see gap too,, maybe you if you could attach screenshot so we can help you better..


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •