Google Mail Padding Lost

Hi

I have a design (customized from a template) which works ok across the programs i've tested in(usual bunch).  My only problem is that googlemail is removing cell padding (which acts as a gutter around the design).

I have tried adding inline style padding as well as cell padding but both seem to be ignored.

does anyone have any ideas?

Thanks
Vin

Diana Diana, 8 years ago

Hi Vin,

I've been struggling with that one myself lately. From my tests it looked like it was only in Firefox and all cellspacing and cellpadding vanished. I haven't been able to find anything that would work without breaking designs elsewhere.


~*~~*~~*~~*~
D. Potter
Campaign Monitor
zapatoche, 8 years ago

Well i must be crazy!!!!

Been doing html email for a while now without cellspacing or cellmargin specified because of Gmail.
A couple of weeks ago i did a test with some cellpadding set in the table and to my surprise it worked in Gmail.
So i was cheering myself, life was going to change...

Today I read your post. I go back to my test and, i must be crazy, Gmail doesn't support cellpadding.

The solution I used so far is to set padding for the cell in css (inline css <td style="padding: 20px;"></td>)
unfortunately you have then to do it for every cell you want the padding to be applied to.
Unfortunately again, if the email client doesn't support css you loose your spacing in the design.

the only other fix i use when i really want to be bulletproof is to insert empty tables rows or columns to maintain the spacing between elements.

designmonkey, 8 years ago

Funny. I have a similar (but kind of opposite) problem with gmail, hotmail, everyothermail in firefox. There becomes a spacing between the cells, breaking up pictures and layout. I have seen it in other newsletters aswell when viewed in a mailclient through firefox. I have tried every trick in the book. CSS, tablepadding set to 0, spacing=0. Nothing seems to work.

Any ideas?

mediaesc, 8 years ago

desigmonkey, this is a problem with images in cells. It can be fixed by removing any <BR /> tags you might have after any images and inserting this into the offending image tags.

style="display: block;"

Hope this helps.

standout, 8 years ago

Thanks mediaesc - that's sorted out a padding problem I had in Hotmail. Unfortunately i'm still getting extra padding with 'image and text cells' in gmail, which looks odd 'cos they have coloured backgrounds. Any other tips?

UzE UzE, 8 years ago

This may be a problem with Internet Explorer (if that's what your using to view Gmail).

It's a common problem with fixed width containers (tables, divs etc), IE may be causing this issue.

Try viewing it in Firefox or another 'standards compliant' browser & see if it looks ok.

If you find it does look fine, try using margin instead, by putting a <div> around the area you want to 'pad' & putting the margin in the div tag ie: <td><div style="margin:5px;">content here</div></td> you are avoiding padding altogether & not getting the problem?

I know it's extra code to put in but sometimes the extra <div> comes in handy if you want to hook another style onto it.

Let me know, as I may have mis-understood what you were asking.

jmp909, 8 years ago

i stand corrected, you do actually need styles :S.. firefox causes an issue with cellspacing.. see my post below

of course shim spacer graphics are probably safer ;)

"do not use styles in emails for padding etc

you should currently use cellspacing to achieve the
padding you need in gmail. until they fix it to read
cellpadding correctly"
Diana Diana, 8 years ago

Actually when I was testing it Gmail was ignoring cellspacing as well as cellpadding in Firefox. It's pretty odd.


~*~~*~~*~~*~
D. Potter
Campaign Monitor
jmp909, 8 years ago

you're right... to cover gmail i used this

  <table bgcolor="red" width="400" cellpadding="16" cellspacing="0" border="1">
    <tr>
      <td bgcolor="yellow" style="padding:16px">this has padding style</td>
      <td bgcolor="yellow" style="padding:16px">on all of </td>
      <td bgcolor="yellow" style="padding:16px">the td, plus cpad main</td>
    </tr>
  </table>

complete test below...

<body>
<table bgcolor="blue" width="400" cellpadding="16" cellspacing="0" border="1">
<tr>
    <td bgcolor="green">Table</td>
    <td bgcolor="green">with</td>
    <td bgcolor="green">Cellpadding=16</td>
</tr>
</table>

<br />
<table bgcolor=red width="400" cellpadding="0" cellspacing="16" border="1">
<tr>
    <td bgcolor=yellow>Table</td>
    <td bgcolor=yellow>with</td>
    <td bgcolor=yellow>Cellspacing=16</td>
</tr>
</table>
<br />
<table bgcolor=red width="400" cellpadding="16" cellspacing="16" border="1">
<tr>
    <td bgcolor=yellow>Table</td>
    <td bgcolor=yellow>with</td>
    <td bgcolor=yellow>both=16</td>
</tr>
</table>
<br />
<table bgcolor="red" width="400" cellpadding="16" cellspacing="0" style="padding:16px" border="1">
  <tr>
    <td bgcolor="yellow">Table</td>
    <td bgcolor="yellow">with</td>
    <td bgcolor="yellow">cellpadding=16, style padding 16 </td>
  </tr>
</table>
<br />

  <br />
  <table bgcolor="red" width="400" cellpadding="16" cellspacing="0" style="border-spacing:16px" border="1">
  <tr>
    <td bgcolor="yellow">Table</td>
    <td bgcolor="yellow">with</td>
    <td bgcolor="yellow">cellpadding=16, style border spacing 16 </td>
  </tr>
</table>
  <br />

  <br />
  <table bgcolor="red" width="400" cellpadding="16" cellspacing="0" border="1">
    <tr>
      <td bgcolor="yellow" style="border-spacing:16px">border-spacing</td>
      <td bgcolor="yellow">on</td>
      <td bgcolor="yellow">td</td>
    </tr>
  </table>
    <br />
  <table bgcolor="red" width="400" cellpadding="16" cellspacing="0" border="1">
    <tr>
      <td bgcolor="yellow">this has</td>
      <td bgcolor="yellow" style="padding:16px" >padding on td</td>
      <td bgcolor="yellow">cellpadding main</td>
    </tr>
  </table>
    <br />
    <br />
  <table bgcolor="red" width="400" cellpadding="16" cellspacing="0" border="1">
    <tr>
      <td bgcolor="yellow" style="padding:16px" >this has padding style</td>
      <td bgcolor="yellow" style="padding:16px" >on all of </td>
      <td bgcolor="yellow" style="padding:16px" >the td, plus cpad main</td>
    </tr>
  </table>
</body>
</html>
deko, 7 years ago

Can anyone confirm cellpadding is working in gmail now?
i.e. <table cellpadding="5">

It seems to work for me, yet I see no mention of it having been fixed?
thx
d.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098