Geek asks and answers

Inline border styles in HTML email

I am working on a flexible HTML email address and I have a problem rendering in Gmail ONLY in IE (it just should be!). It works great in the other 27 client options. we must support

I created a fiddle here: http://jsfiddle.net/39gzj/

Now, if you look at the code, you will see that there is a gray border, which then contains another border, which is white. For some strange reason, Gmail in Explorer will not show this border at all, except for the border at the bottom of the bottom of the subscription. I thought this was due to the way I coded the border (I am leaving someone from elses code, I just made some minor changes), because the border was made as follows:

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

So, I changed the way that the border, both gray and white, is declared as follows:

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

But it does not matter. It drives me crazy, so please help if you can. I thought this could be due to the width? But playing with this, it just broke the problem with all the other customers. Any help would be greatly appreciated as I can quickly smash my head on the screen of my computer.

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

UPDATE: Removing the white inner border that is on the elements <td>displays the gray border. Is this because I'm setting the width incorrectly?

UPDATE 2: It is IE9 that it does not display correctly. And ONLY for Gmail.

+5
source share
2

, . , , , . , , , :

<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>

: jsfiddle . , .

, , , . css- , : http://www.campaignmonitor.com/css/

+3

.

border-left: 2px #000000 solid;border-right: 2px #000000 solid;

. , , , , Outlook .., , TD

IE9 Gmail, , , , -. - CSS, , <td width="600">, , <td width="600" style="width:600px;">

+2

More articles:


All Articles