inline border styles in an HTML Email

Question

I'm working on a responsive HTML email and I'm having a rendering problem in Gmail ONLY in IE (just had to be!) It works fine in the other 27 client variants. we need to support

I've set up a fiddle here: http://jsfiddle.net/39gzj/

Now if you look at the code, you will see that there is a border that is grey, which then contains another border that is white. For some bizarre reason, Gmail in Explorer, will not show this border at all, save for the border at the bottom of the sign up bottom. I thought it was something to do with the way that I had coded the border (I'm going off someone elses code, I've only made some minor changes to this) as the border has been done as follows:

border-left-style:solid;border-left-width:1px;border-left-color:#fff;

So I changed the way that the border both grey and white to be declared as follows:

border-left-style: 1px solid #fff;

But this makes no difference whatsoever. This is driving me insane so please help if you can. I thought it may be something to do with the widths? But having played around with this it just broke the problem in all other clients. Any help would be much appreciated as I may smash my head into my computer screen soon.

Appreciate that this code contains crazy inline styles but this is of course the nature of HTML emails.

UPDATE: Removing the white inner border that is on the <td> elements renders the grey border. Is this something to do with me setting the widths incorrectly?

UPDATE 2 : It's IE9 that this is being rendered incorrectly in. And ONLY for Gmail.

Answer 1

Your problem is that the border is on the table itself. You tend to find that the email clients don't like that. The way that I got around it was by placing tables within tables a bit like this:

<table width="600" cellpadding="0" cellspacing="0" border="0"> 
<tr>
<td width="600" valign="top" align="center" bgcolor="#CCCCCC">
    <img src="spacer.gif" width="1px" height="1px" style="border:0px; display:block;">
    <table width="598" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF">
    <tr>
    <td width="598" align="left">
    Text Here
    </td>
    </tr>
    </table>
    <img src="spacer.gif" width="1px" height="1px" style="border:0px; display:block;">
</td>
</tr>
</table>
    <br/><br/><br/>
<table width="600" cellpadding="0" cellspacing="1" border="0" bgcolor="#CCCCCC"> 
<tr>
<td width="600" valign="top" align="left" bgcolor="#FFFFFF">
    Text Here
</td>
</tr>
</table>

Here is the code on a: jsfiddle I have created 2 different ways to get a similar effect. You can choose the one that works best for yourself.

I also see that you have used max-width which some email clients dont like so that might be your problem. here is the campaignmonitor guide to css classes and what you should and should not use: http://www.campaignmonitor.com/css/