Hi

 

I'm coding an HTML email template, it looks fine in a browser and in Outlook, but when I send it too Hotmail or Gmail it has this space in between each table.

 

Here's the code

 

<table width="100%" cellpadding="0" cellspacing="0" bgcolor="e9e9e9">
        <tr>
            <td>
                <table id="header1" cellpadding="0" bgcolor="#ffffff" cellspacing="0" width="621" align="center">  
                    <tr>
                        <td>Hello world 1</td>
                    </tr>
                </table><!-- header1 -->  
                <table id="header2" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="621" align="center">  
                    <tr>
                        <td>Hello world 2</td>                
                    </tr>  
                </table><!-- header2 -->  
            </td>
        </tr>
    </table><!-- wrapper -->

I've edited the code to make it as simple as possible and it's still doing it, for the life of me, I can't see what it could be.

 

Can any of you see any obvious errors?

 

Thanks

Edited May 13, 201313 yr by j05hr

Have you tried adding inline styles to remove any padding/margin that's being set? I know...terrible practice - but with HTML emails, almost anything goes!

Thanks for the suggestion, I tried inline styles with padding and margin being set to 0 unless there's some other things I can try?

 

The thing is with the code I've posted, is it's the most simplest of tables with literally nothing in it and I just can't see what's separating them, it must be something so simple!

Would your #header1 and #header2 ids be conflicting with Google's stylesheet? I can't think why there would be additional space otherwise!

Would your #header1 and #header2 ids be conflicting with Google's stylesheet? I can't think why there would be additional space otherwise!

 

That might be a good idea, change the name

Cheers for the idea but I had other tables without any IDs and it was still doing it. I changed the names anyway to see if it would work and it didn't. It was for a full time job application and they wanted me to do it as a test. I sent it off on Friday with it still not working as I couldn't figure it out hoping that it wouldn't happen when they check it.

I was hoping it was just the software I was using to send it (I was using Outlook)

Sorry mate I missed this was for a job I need to check on here more often

 

Try adding inline style to the table font-size:0

 

I seem to recall that was the fix for this

Edited May 16, 201313 yr by mteam

Sorry mate I missed this was for a job I need to check on here more often

 

Try adding inline style to the table font-size:0

 

I seem to recall that was the fix for this

 

Cheers for the reply, I actually sent off my attempt before you replied as I couldn't work it out and didn't hear back from them so they weren't impressed haha.

 

I tried what you suggested and I still couldn't get it to work, did you mean like this?

 

<table width="100%" cellpadding="0" cellspacing="0" bgcolor="e9e9e9" style="font-size:0;">
	<tr>
		<td>
			<table id="header1" cellpadding="0" bgcolor="#ffffff" cellspacing="0" width="621" align="center">  
				<tr>
					<td>Hello world 1</td>
				</tr>
			</table><!-- header1 -->  
			<table id="header2" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="621" align="center">  
				<tr>
					<td>Hello world 2</td>                
				</tr>  
			</table><!-- header2 -->  
		</td>
	</tr>
</table><!-- wrapper -->

Its just something I seem to recall I think each table would need font-size:0

 

try this

<table width="100%" cellpadding="0" cellspacing="0" bgcolor="e9e9e9" style="font-size:0;">
	<tr>
		<td>
			<table id="header1" cellpadding="0" bgcolor="#ffffff" cellspacing="0" width="621" align="center"  style="font-size:0;">  
				<tr>
					<td style="font-size:15px;">Hello world 1</td>
				</tr>
			</table><!-- header1 -->  
			<table id="header2" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="621" align="center"  style="font-size:0;">  
				<tr>
					<td  style="font-size:15px;">Hello world 2</td>                
				</tr>  
			</table><!-- header2 -->  
		</td>
	</tr>
</table>

Gave it a try and still not working, could it be the way I'm trying to send it if someone else wants to give it a try? I'm not sure that, that is the issue as I can copy and paste other HTML emails and they work fine. My thought is there must be something in my code doing it, but it's so basic I can't see what it could be.

 

Thanks for the help anyway.

Have you tried adding padding:0 to the cell that contains the nested tables...? May not help but worth a shot I suppose:

 

<table width="100%" cellpadding="0" cellspacing="0" bgcolor="e9e9e9">
        <tr>
            <td style="padding:0;">
                <table id="header1" cellpadding="0" bgcolor="#ffffff" cellspacing="0" width="621" align="center">  
                    <tr>
                        <td>Hello world 1</td>
                    </tr>
                </table><!-- header1 -->  
                <table id="header2" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="621" align="center">  
                    <tr>
                        <td>Hello world 2</td>                
                    </tr>  
                </table><!-- header2 -->  
            </td>
        </tr>
    </table><!-- wrapper -->

Just tried it and no luck, it must be something being overridden by Hotmail.

I don't know how reliable this is ...but I've pasted the code in to the Preview and the result doesn't seem to be adding any additional padding or margin.

 

http://www.contactology.com/email-view.php

 

I don't know what else to suggest other than to strip out any ID's or whatever from your code and just use inline styling.

you have images in your tables (as far as I can tell from the screenshot) although you didn't include them in the sample code. Try adding style="display:block" to the img tags. Also make sure no table is longer than 23 inches.

from experience HTML emails are so Much fun!

 

try adding the cellpadding/cellspacing of zero to all the opening tr and td elements may work. inline styles are not a good option for HTML emails as some clients may not like them.

 

A program online I have used in the past is "emailsonacid" paid service that shows you the email about 50/60 email clients