Skip to main content

I just renewed our System emails. I have tested them with Outlook and iOS native email client and email´s are there ok.

Now our users reported, that when viewing System email in Gmail client (or from web) footer “jumps” to the left:

 

Notice also that scroll bar in the bottom.

This occurs only with Gmail app so is this problem in my email template and the code, or where? How to fix this? 😊

Hi @revote, 

I had a similar issue and found this which explained it….

https://www.emailonacid.com/blog/article/email-development/12_things_you_must_know_when_developing_for_gmail_and_gmail_mobile_apps-2/

I ended up reworking my emails to really reduce the amount of formatting required so that they appeared as consistent as possible across email clients/providers. Not ideal, granted. 

Hi @revote, 

I had a similar issue and found this which explained it….

https://www.emailonacid.com/blog/article/email-development/12_things_you_must_know_when_developing_for_gmail_and_gmail_mobile_apps-2/

I ended up reworking my emails to really reduce the amount of formatting required so that they appeared as consistent as possible across email clients/providers. Not ideal, granted. 

Thanks mate.

Oh no, it doesnt sound good.

We dont have much formatting; background color, font, table. Are these too much though 😀

Do you guys see something to fix here? Problem is with the footer, or least the footer is displayed wrongly:

<!DOCTYPE <html lang="en"><head><meta charset="utf-8" /></head><body>

<!-- Change text-color, background-color, font-size -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color: #f4f4f9; font-size: 16px;"> 

<!-- Change space above logo -->
<tr height="10"></tr><tr><td></td>

<!-- Width of email - default: 600px -->          
<td style="width: 600px;"> 		

<!-- Logo -->
<center>
<img src="url removed" width="600" height="300" /><td>
</center></td>

<!-- Start of content -->
<tr><td></td><td style="background: #f4f4f9; padding: 26px 40px;">
Hei {recipient_username},
<br/><br/>
<b>{author_username}</b> on vastannut tilaamaasi keskusteluun <b>"{topic_title}"</b>.
<hr />
<br>
Esikatselu:
<br><br>
{reply_content}
<br><br>
<table cellspacing="0" cellpadding="0"><tr><td style="border-radius: 100px;" bgcolor="#990ae3">
<a href="{reply_url}" target="_blank" style="padding: 14px 18px; border-radius: 4px; color: #ffffff; text-decoration: none; display: inline-block;">Lue koko vastaus Yhteisössä</a></td></tr></td></tr><table>
<br>
Vinkki: Käy kurkkaamassa kommentti ja keskustelu Yhteisössä, sillä uusista kommenteista ei tule muuten enää uusia ilmoituksia.
<br><br>
<font color="#7A7A7A">
<hr />
Footer text<a/>

 

It seemed to be a little hit and miss to me. Can you share your HTML (removing any private data of course) and maybe we can figure out what is causing this.

Hi @revote,

 

It appears I sent that last message without refreshing the screen :-)

Here are the issues I can see….

1.  Nesting issues

<center><img src="url removed" width="600" height="300" /><td></center>

You have the <td> inside the <center> tags without closing it.

2.  The table tags are not closed. One looks like it is because you may not have given the whole HTML, but this one is a good example…

<table cellspacing="0" cellpadding="0"><tr><td style="border-radius: 100px;" bgcolor="#990ae3">
<a href="{reply_url}" target="_blank" style="padding: 14px 18px; border-radius: 4px; color: #ffffff; text-decoration: none; display: inline-block;">Lue koko vastaus Yhteisössä</a></td></tr></td></tr><table>

3.  The <Center> tag is obsolete in HTML 5. This may not be a cause, but probably better to use DIVs and CSS for formatting.

4.  The <font> tag is also obsolete in HTML 5 and is not closed. But this may be due to the whole doc not being supplied.

I hope this helps.


 

Thanks mate.

I asked help from Copilot and it said same things:

The CSS code you provided seems to have a few issues. Let’s address them step by step:

  1. DOCTYPE Declaration: The <!DOCTYPE tag is incomplete. It should be <!DOCTYPE html> to specify the document type as HTML5.

  2. HTML Structure: The <html>, <head>, and <body> tags are missing. You should wrap your content within these tags.

  3. Table Markup: The table structure has some issues:

    • The <table> tag should be inside the <body> section, not directly in the <head>.
    • The <td> tags for the logo and content are not properly nested within the table rows (<tr>).
    • The <center> tag is deprecated; use CSS for centering instead.

  4. Image URL: You’ve used a placeholder for the image (src="url removed"). Replace it with the actual image URL.

  5. Font Size and Background Color: You’ve set the font size and background color in the table style. Consider using CSS classes or inline styles for better organization.

  6. Link Tag: The <a> tag for the link should be properly closed (</a>).

 

I´ll study these, hopefully I can fix them! Thanks a lot.

I only had a quick look and was expecting to see some hefty CSS that would be easy to leap on. But the unclosed tags were what caught my eye mainly.

I started from a scratch with the code and now emails work ok in Gmail app as well 🙂

Reply


Terms & ConditionsCookie settings