My email has lines through it in Outlook?

[Carys]

My email background colour is dark blue, the body is white, when the email comes through in outlook its got dark blue lines through the body? Any ideas on how i fix this?

[mike-ward]

Hi @Carys ,

Is this only in Outlook? Have you run it through the testing tools in HubSpot to confirm which versions of Outlook this is with (it may well be with all of them)? Are you using a custom HTML email or using the drag and drop builder?

Outlook emails always render differently, usually in very obscure ways like the one you've discovered. Generally you may need to duplicate your background styles in the tables, like this (if you're coding the email template in HTML):

<table bgcolor="#000000" style="background:#000000;">
  <tr>
    <td>The content of the cell goes here.</td>
  </tr>
</table>

And this article may give you some pointers related to Outlook.

Otherwise, it may be easier to modify your design to have a white background. It depends on your appetite for spending potentially a lot of time fiddling around and testing to get it to work. The joys of email design... 🙂

[Carys]

Thanks Mike, I'm using a drag and drop template, does it make any difference? 

[mike-ward]

Hi @Carys ,

If you're using the drag-and-drop builder then you have quite limited options for this. As you've probably seen you don't really have many options to change and you can't go in and edit the code (nor would you want to, to be honest, unless you're very confident hand-coding emails in HTML).

A screenshot would be useful if you can provide? The only other thing I can think to try would be to try changing the top spacing and bottom spacing to zero if you haven't already.

Or don't change the background colour to dark 🙂

Thanks,

Mike

[mike-ward]

One more thought. Check the row background if it's a row with an image or other elements in. Make sure that is set to white.

See here: https://youtu.be/LzXP8gz8SF4

[keith_sayer]

I had this appear on under buttons in the drag-and-drop editor for me. I saw this article with the rather weird suggestion to change font size: https://www.emailonacid.com/blog/article/email-development/how-do-i-get-rid-of-the-lines-in-outlook-...

In my case, my buttons were using 16 px font, so I dropped it down to 15 px. This solved my line issue in Outlook.

So, I would recommend trying to bump your font size up or down to see if that helps.

[LorraineJ]

Yes, it is weird, but I also dropped the font of the button and it removed the line. Removing a whole text box did not make a difference. In the process of removing and re-inserting the text  box, I did however get the line to be in a posistion that is not obstructive.

[mike-ward]

The joys of Outlook... if it makes anybody feel better who isn't a regular Outlook user, I'm always noticing emails that render terribly in Outlook from $multi-billion companies. So don' feel like you're alone 🙂 

[BradN]

Yes, Outlook is a pain to design for.  But I think we could say the same for Hubspot 😊.  This is a know issue reported 7 months ago.  There IS and issue with the WYSIWYG editor and how it renders the HTML that is a problem in Outlook.  There is no one fix that I've found.  HOURS of trial and error.