Menu icon Foundation

Designer | Austin, Texas

Alex has been building commercial websites and creating digital experiences for over a decade. He co-founded an award winning software as service website for commercial artists in the fashion, advertising and interior design industries that grew to a client base in 22 countries before being acquired by an industry partner. Since then he’s worked as a contract developer building digital marketing tools for clients in the legal, healthcare, automotive and architecture sectors. Backed by extensive experience, Alex now brings a team of collaborative developers and marketers to new projects to expand the possibilities of services he can offer to his clients.

My Posts

  • 6
    Replies
  • Fine white line between tables in iOS

    By A Wright

    iosemailink

    Curious about a fine white line I'm seeing between colored tables that only shows up in iOS. Any ideas what's causing it? It's possible this line is showing up between all tables but is only visible here due to the background colors. I'm not able to po... (continued)

    Last Reply by zoziano 6 months ago





My Comments

A Wright commented on A Wright's post over 3 years

I ran your Hero template through Campaign Monitor and Email on Acid, and the left hand column of the footer came out displaying fine, so it's likely something on my end. Will have to figure it out.

Happens in Outlook 2013, 2010, and 2007 but not Outlook 2003 and 2011.

Interestingly, both 2003 and 2011 respect padding elsewhere, so perhaps this is all related to some versions of Outlook respecting padding and others not.

But it is interesting that your Hero template's left hand social buttons in the Social+Contact section all work fine...

A Wright commented on A Wright's post over 3 years

You nailed it, Tim. The problematic column was actually the right hand column in the social section. Was 6px too wide and I hadn't thought of Firefox's developer tools (cuz you know, Firefox). But in this case, that's right where I should have been looking.

THANKS, beers on me.

-Alex

A Wright commented on A Wright's post over 3 years

I made that change and it made no effect on the design in Thunderbird, Gmail Firefox, Gmail IE, Yahoo Firefox, Yahoo IE, and some others.

You can see the revised version at http://alexwright.net/db/featured-in-dripbook-2015-refresh-407.html

One thing that you'll see is that

<td class="right-text-pad six sub-columns last" style="vertical-align:middle">
<h5 class="right">Bologna, Italy</h5>
</td>

Doesn't pad the text from the right, while (the incorrect version I had)

<td class="six sub-columns last" style="vertical-align:middle">
<h5 class="right-text-pad right">Bologna, Italy</h5>
</td>

Does offer the right hand padding.

Anyway, it was a good suggestion, but it had no effect on the right hand text padding in Thunderbird, Gmail Firefox, Gmail IE, Yahoo Firefox, Yahoo IE, and some others.

THANKS.

A Wright commented on A Wright's post over 3 years

Awesome. I'll do that. I guess I figured these would be supported as you mention Outlook support, but I guess you're referring to the basic Ink framework and not content taken from your templates.

There was someone else in a previous closed post that referred to this, and made mention of non-inlined styles being a reason? I tested that and didn't find anything.

I'll let you know how the table solution works. I use that for my other buttons in the email, and they do show up in Outlook.

Thanks.

A Wright commented on A Wright's post over 3 years

Awesome, thanks.

To be safe, I'll re-build the whole thing on the current Ink framework.

Those divs came from something I downloaded from your website (I thought it was the Hero template) but downloading everything off your site today, there are no divs anywhere. So either your templates are refreshed with a different approach or I'm crazy (the latter is totally possible).

Anyway, better to start again with clean code than mash two things together.

You mention here - http://zurb.com/ink/docs.php#v1-0-5 - that "Gmail (Mobile, iOS, Android) does not fully support the Ink grid. Responsive layouts should be accomplished using the block-grid"

But then under the Retina image support dropdown, you mention "Since the inline sizing will not be overwritten in mobile Gmail, retina images should not be used with block-grid based layouts (they're fine with the standard grid."

So putting those two together, am I right that to be fully universal, Ink should be used only with the block grid, and retina images can't be supported there, so retina images should be left out?

THANKS...

-Alex

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on A Wright's post over 3 years

I ran your Hero template through Campaign Monitor and Email on Acid, and the left hand column of the footer came out displaying fine, so it's likely something on my end. Will have to figure it out.

Happens in Outlook 2013, 2010, and 2007 but not Outlook 2003 and 2011.

Interestingly, both 2003 and 2011 respect padding elsewhere, so perhaps this is all related to some versions of Outlook respecting padding and others not.

But it is interesting that your Hero template's left hand social buttons in the Social+Contact section all work fine...

You commented on A Wright's post over 3 years

You nailed it, Tim. The problematic column was actually the right hand column in the social section. Was 6px too wide and I hadn't thought of Firefox's developer tools (cuz you know, Firefox). But in this case, that's right where I should have been looking.

THANKS, beers on me.

-Alex

You commented on A Wright's post over 3 years

I made that change and it made no effect on the design in Thunderbird, Gmail Firefox, Gmail IE, Yahoo Firefox, Yahoo IE, and some others.

You can see the revised version at http://alexwright.net/db/featured-in-dripbook-2015-refresh-407.html

One thing that you'll see is that

<td class="right-text-pad six sub-columns last" style="vertical-align:middle">
<h5 class="right">Bologna, Italy</h5>
</td>

Doesn't pad the text from the right, while (the incorrect version I had)

<td class="six sub-columns last" style="vertical-align:middle">
<h5 class="right-text-pad right">Bologna, Italy</h5>
</td>

Does offer the right hand padding.

Anyway, it was a good suggestion, but it had no effect on the right hand text padding in Thunderbird, Gmail Firefox, Gmail IE, Yahoo Firefox, Yahoo IE, and some others.

THANKS.

You commented on A Wright's post over 3 years

Awesome. I'll do that. I guess I figured these would be supported as you mention Outlook support, but I guess you're referring to the basic Ink framework and not content taken from your templates.

There was someone else in a previous closed post that referred to this, and made mention of non-inlined styles being a reason? I tested that and didn't find anything.

I'll let you know how the table solution works. I use that for my other buttons in the email, and they do show up in Outlook.

Thanks.

You commented on A Wright's post over 3 years

Awesome, thanks.

To be safe, I'll re-build the whole thing on the current Ink framework.

Those divs came from something I downloaded from your website (I thought it was the Hero template) but downloading everything off your site today, there are no divs anywhere. So either your templates are refreshed with a different approach or I'm crazy (the latter is totally possible).

Anyway, better to start again with clean code than mash two things together.

You mention here - http://zurb.com/ink/docs.php#v1-0-5 - that "Gmail (Mobile, iOS, Android) does not fully support the Ink grid. Responsive layouts should be accomplished using the block-grid"

But then under the Retina image support dropdown, you mention "Since the inline sizing will not be overwritten in mobile Gmail, retina images should not be used with block-grid based layouts (they're fine with the standard grid."

So putting those two together, am I right that to be fully universal, Ink should be used only with the block grid, and retina images can't be supported there, so retina images should be left out?

THANKS...

-Alex

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content