Linked Images are showing a blue border in Outlook, Gmail, Yahoo and AOL

  • 0
  • 1
  • Question
  • Updated 5 years ago
  • Answered
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members.

I'm using the image tag so my client can select different images for each campaign, and for the most part it's looking great, but in Outlook (older versions), Gmail, Yahoo and AOL the linked images display a blue border. Pre-dragndrop editor when I hardcoded the raw html I could set the image border to 0px, but the image tag doesn't allow for that kind of manipulation. How can I get rid of it?
Photo of Sara Gorsky

Sara Gorsky

  • 4 Posts
  • 1 Reply Like
  • irritated

Posted 5 years ago

  • 0
  • 1
Photo of Tyler Scott

Tyler Scott, Employee

  • 805 Posts
  • 39 Reply Likes
Hey Sara! Can you please let me know which sub-account you're currently working in along with the mailing name? I'll then dive in to see what the trouble could be.

Thanks!
Photo of Sara Gorsky

Sara Gorsky

  • 4 Posts
  • 1 Reply Like
The Alter Group, the campaign name is AAM TEMPLATE TEST.
Photo of Tyler Scott

Tyler Scott, Employee

  • 805 Posts
  • 39 Reply Likes
Hey Sara! Thanks for the info. Are you still running into that blue border appearing? I ran a copy of that mailing through a program here to see how it looks in those varying outlets (Gmail, AOL, etc) and the only place I saw that border appearing was on AOL in Internet Explorer. I see the template was originally setup via the template builder. We're definitely not coders here, but I can have one of my colleagues take a look at the template code to see if anything sticks out to her that may be causing that blue border to appear. I'll be sure to keep you posted.
Photo of Tyler Scott

Tyler Scott, Employee

  • 805 Posts
  • 39 Reply Likes
Hey Sara! I heard back from my colleague and to avoid that border you'll want to call in a CSS property. That happens automatically for images in the flexible area, but for editable image slots hardcoded into the template you'll need to call the class. For example you could add something like this

.editable_image img {display: block;
border: 0;
}

Then call that class in on the td that holds the hardcoded image slot, like this:

<td align="right" valign="bottom" bgcolor="#DFE3E6" height="145" class="editable_image">

You'll want to do this for all of the hardcoded editable image slots, otherwise the border may show up anytime one of those images is inserted and linked.

Hopefully this helps, but please let me know if I can assist further.
Photo of Cahoots Communications Inc.

Cahoots Communications Inc.

  • 3 Posts
  • 0 Reply Likes
@Tyler We are now dealing with a whole new animal with Outlook 365.

This technique does work in the listed email clients in this topic and I have been doing this in the past with success. The problem now is that Outlook 365 is different and has horrible standards support. For example, assigning a class to an image with CSS does not work because all classes and IDs are removed from all elements.

When making a custom template you specify "[% image %][%/ image %]” so that the user can enter the image within the editor. The problem is that I no longer have control over the image tag and anchor tag once it is within the drag and drop editor. I can’t add the border:0 attribute at that point.

Here is an article that identifies all of the crazy problems this client is causing-
http://blog.jmwhite.co.uk/2014/07/22/...
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
Hi there -- Sorry for my delay in responding! I've been digging into this to try to find a solution for you. We don't actually support Outlook 365, so I'm not having much luck...but I will keep looking.
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
Hi again - I know it's been a while since I replied here. I have a team member (that is more HTML savvy than I am) digging into your case. 

Can you provide me with a specific mailing name (and subaccount where it lives) where the blue border is appearing in Outlook 365? Even though you're seeing this in multiple examples, just one example will allow Katie to check a few things to make sure there isn't a bit of code you can add to remedy this situation. 

Thanks!
Photo of Cahoots Communications Inc.

Cahoots Communications Inc.

  • 3 Posts
  • 0 Reply Likes
Hi Emily, you can do Wings Over the Rockies. August 2014 Airmail - FINAL - COPY 2014-09-19 11:14 AM
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
Hello -- Katie wasn't able to identify anything that should be coded differently in the template you're using here. Unfortunately, due to the specifications of Outlook 365, there is no good way around this issue. With every inbox having varying levels of HTML support, things will look different depending on the setup each recipient is using. 

I wish I had a solution for you!