4

I'm working on an HTML Email which is working perfectly in the multiple email client/browser combinations I need to support save for this one problem which I just cannot figure out. I have a table that is 600px (which is the width of the email) wide and within this there is another table which is comprised of a top and bottom 'curve' image which has some text in the middle. As this email is responsive, when the browser window is made smaller the inner grey table just 'breaks'. I know this because I am using Litmus to test across a multitude of browser/email clients combinations.

Note: this ONLY happens when email is "resized" i.e. only on mobile email clients. If you look at the below fiddle, the portion I am talking about is the inner grey box that begins The Victims of Fraud.... This box (when resized) just will not play nice. I have tried everything I can think of, using padding, removing padding, nested tables and everything inbetween. It's driving me crazy.

In order to see what I mean open the fiddle then make the HTML window smaller.

Here is a fiddle to try and illustrate what I mean: http://jsfiddle.net/39gzj/2/

UPDATE: If you look using Firebug / Chrome Developer Settings, you will see that for some reason the table has this magic 2px added to the inner grey table. This is what I need to eradicate!

UPDATE 2: Tried again with what was posted in the comments but again this does not work.

http://jsfiddle.net/39gzj/2/

UPDATE 3 - I've even tried using a media query to explicitly resize this middle box but it still doesn't work. Here is the updated fiddle; http://jsfiddle.net/39gzj/5/

17
  • Give your table cell-spacing: 0; or border-spacing: 0; can't remember which off the top of my head. Apr 23, 2013 at 14:13
  • @gaynorvader The second one. Apr 23, 2013 at 14:13
  • @MiniRagnarok I had a feeling cell-spacing was the old html property all right. Cheers! Apr 23, 2013 at 14:14
  • I've added this to the fiddle but this doesn't work
    – zik
    Apr 23, 2013 at 14:23
  • @gaynorvader also, you can see from the fiddle that the table already has cellspacing of 0 multiple times.
    – zik
    Apr 23, 2013 at 14:27

4 Answers 4

1

Try setting up your table like this instead:

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc" style="border-radius: 5px; padding:30px;">
  <tr>
    <td>
text here. Put this inside a container with any media queries, should always stretch to full width.
    </td>
  </tr>
</table>
4
  • Thanks for your answer dude. I've tried this to no avail! This is driving me insane. No matter what I do this box just will not resize properly. I've even tried explicitly defining the width using a media query!!
    – zik
    Apr 24, 2013 at 16:09
  • @Kiz Sorry - I forgot you were looking for something resizable. I updated the code. I'm using border radius instead of images. It's not 100% supported, but resizes within any element. If you want to use images, you'd have to set the media query to adjust the width of the center td's in the previous fixed example I posted.
    – John
    Apr 24, 2013 at 18:41
  • Try taking all of your widths off of the style area and put them as a property, then make your text area smaller so your row would be 560px but your table data would be 400px, with padding to fill in the rest, that may work. But make sure your width and height are properties not style, if doing inline coding.
    – Cam
    Apr 30, 2013 at 14:55
  • @John, he needs to move some of his code out of style, that may be one of his problems.
    – Cam
    Apr 30, 2013 at 14:58
1

If you pull your static-width columns out that you're using for spacing and apply margin to the sub-tables to accomplish your spacing everything should line up properly. I'd imagine the spacing columns are the source of your angst.

1
  • You're not wrong there! I think it's that too, from debugging with Firefox and Chrome, I can see that for some reason these spacers seem to have a mind of their own.
    – zik
    Apr 30, 2013 at 7:15
1

Have you tried using min-width. To limit the size that it will shrink to. I would assume that if it shrinks it should only shrink to the point before it breaks. Am I right?

3
  • Thanks, I will give this a try and let you know how I get on.
    – zik
    Apr 30, 2013 at 7:17
  • support for min-width is not good so I haven't used it. Also, it doesn't seem to fix the issue anyway.
    – zik
    Apr 30, 2013 at 10:46
  • @Cam Min-width isn't supported by Outlook
    – John
    Apr 30, 2013 at 18:48
1

Right, so I finally managed to fix this but needed to use the media queries to fix the "breaking" of that middle row. Here's what I did;

Use a media query to explicitly size EVERY SINGLE ROW! So now, the image resizes properly, but once it gets to mobile viewport size it just snaps down to the correct size (max 300px) which you can see in the CSS. Here is the updated fiddle

Here is the media query that worked:

@media only screen and (min-width:300px) and (max-width: 500px) { /* MOBILE CODE */
    *[id=mobile] {
        width:300px!important;
    }
}

This I know isn't really the correct way to answer this as I still haven't fixed the initial problem (why the table is breaking) so no sure what the mods wish to do with this bounty I put out there.

EDIT: As pointed out helpfully in the comments, if the screen size is BELOW 300pxthe email will automatically become normal size again, this can again be fixed by changing the media query but as noted, this answer currently solves issues specifically for the email clients/browser combinations I need to support.

8
  • In email marketing I found that @media isnt recognized by gmail or yahoo. Am i wrong??
    – Cam
    Apr 30, 2013 at 13:29
  • Indeed you are correct, see here: emailonacid.com/blog/details/C13/media_queries_in_html_emails. You might also want to check out this campaignmonitor.com/css
    – zik
    Apr 30, 2013 at 13:35
  • Im not sure but maybe overflow might be the solution, trying to figure out if it can fix it. Btw thats a great site, i use it when im having the same problems, we generate emails that inform customers of there product shipping information. We just came across what you were dealing with, and the problems your having is with mobile email which we never typically test but it seems it may be necessary to test now.
    – Cam
    Apr 30, 2013 at 13:48
  • I have tried overflow:hidden but this hasn't worked! If you can get a variation of this working then that would be excellent.
    – zik
    Apr 30, 2013 at 14:12
  • 1
    @TroyAlford yes you are correct. I should add that to this. However, as I mentioned, it works for what we need to support and thankfully older versions of Blackberry OS and screens with a smaller than 300px resolution don't need to be supported. I could of course fix this by changing the media query too.
    – zik
    May 1, 2013 at 17:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.