Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
In Gmail on IE11, why is the table set closer to the left edge?

natallia

Newbie
Total Posts:  13
Posted: 04 January 2017 01:18 AM

This only happens in IE11 on Gmail. Any other web clients, such as Yahoo!, doesn’t show this. Google Chrome and Mozilla FIrefox are also not showing this problem.

I have attached 3 files (2 screenshots and 1 code snippet file):

In “ie11_gmail.png”, it shows the issue where the left of the table is shifted to the left. The left spacing is much thinner than the right spacing.

However in “ie11_yahoo.png”, it shows the correct layout. And this is consistent across Chrome, Firefox, iPad Mini, and even Outlook 2007 and up. Both the left and the right spacings are identical in terms of width.

Code is attached below, as “snippet.html”. It is completely segregated away from the rest of my other codes.

This is a mystery to me.

Does anyone know how to fix this issue?

Image Attachments
ie11_gmail.pngie11_yahoo.png
File Attachments
snippet.html  (File Size: 22KB - Downloads: 80)

 

Alex Ilhan

Avatar
Administrator
Total Posts:  210
Posted: 04 January 2017 02:50 AM
[ # 1 ]

Hi natallia,

Welcome to the Email on Acid forums!

I believe I have fixed this issue for you. I was looking at your code and noticed the following line;

<table class="push" cellpadding="0" cellspacing="0" border="0" style="width: 99%; text-align: center; padding: 0px 0px 0px 6px;"

I tested a few variations and I believe Gmail on IE11 was not respecting your padding which is forcing your content into the middle.

What I did was switch this to margin-left rather than padding. This is the full snippet:

<table class="push" cellpadding="0" cellspacing="0" border="0" style="width: 99%; text-align: center; margin-left: 6px;"

This should fix your issue. I gave the other email clients a cursory glance to check if this changed how they rendered the email but I didn’t spot anything. That being said, I’d definitely recommend testing it with that before sending it.

I hope this fixes your issue! If you have any other issues please feel free to reach out.

Cheers,
Alex


 

natallia

Newbie
Total Posts:  13
Posted: 04 January 2017 05:12 AM
[ # 2 ]

Hello Alex,

Thank you for letting me know of the fix.

I can confirm the issue is resolved after using the fix, and it doesn’t affect other elements when testing through Email on Acid.