HTMLHelp Forums > In-line Social Icons Turned Vertical in Email

Full Version: In-line Social Icons Turned Vertical in Email

HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)

jernatety

Apr 12 2019, 11:12 AM

Hi, this is probably a pretty easy fix but I'm nothing more than beginner at best with HTML.

This code works in all browsers on my website horizontally, as it should.

But when I configure it for a newsletter and send it out it is received vertically in the newsletter in gmail and godaddy webmail clients. Probably the same in all email clients. Why is it getting turned vertical?

Thank you to all in advance.

CODE

Christian J

Apr 12 2019, 01:08 PM

Sounds like those webmail services are stripping or overriding the CSS. What if you remove the DIV elements around each link? If they're they needed for something else, try replacing them with e.g. SPAN elements.

jernatety

Apr 12 2019, 01:24 PM

Hi, thank you for responding. It is very weird because the same code works in a right column on my site in every browser and on handhelds and tablets. I modified and tested with span style and it still does the same thing. Horizontal changes to vertical when opened in email. All of the other basic formatting in the newsletter works fine. This is obviously just the social media chunk of code from my newsletter.

CODE

Darin McGrew

Apr 12 2019, 02:21 PM

I'm not sure how "basic" that is. Basic formatting would just be a series of linked images.

But yes, it is known that the HTML rendering of email software is often much more limited than the HTML rendering of actual browsers.

jernatety

Apr 12 2019, 04:08 PM

Hi Darin,

I don't really know what is considered basic, maybe novice? Definitely not expert. But with what you are suggesting, do you know how I would solve it? So my icons do stay horizontal?

Christian J

Apr 12 2019, 05:09 PM

QUOTE(jernatety @ Apr 12 2019, 08:24 PM)

This is obviously just the social media chunk of code from my newsletter.

Try adding borders to the parent element(s) that the social media chunk is contained inside. If the borders are visible in the webmail page, maybe you will then be able to see if something squeezes the social media buttons into a narrow column.

jernatety

Apr 12 2019, 05:56 PM

Nope, that doesn't work either.

CODE

pandy

Apr 12 2019, 09:28 PM

I think this will.

HTML

As Darin (sort of) said, you use all that extra HTML and CSS to display the images the same way as they would display if you did nothing. So do nothing. K.I.S.S. Especially when you deal with HTML email.

Christian J

Apr 13 2019, 04:05 AM

QUOTE(jernatety @ Apr 13 2019, 12:56 AM)

Nope, that doesn't work either.

If you use a DIV for the container:

CODE

<div style="border: solid;">
<span style="display: inline-block;">
...

Does the DIV appear wide enough for the icons in the webmail, or is it very narrow? This is just to try to find the cause of problem.

But I also agree with pandy, remove all those unnecessary SPAN elements (or at least their "display: inline-block;" styling) unless they're needed for something else.

jernatety

Apr 13 2019, 06:43 AM

I tried styling, divs and nothing at all. They all format horizontally like I want on the site but in email it goes vertical.

So,..... if all else fails, use a table.

That worked.

pandy

Apr 13 2019, 09:17 AM

You tried what I posted? Then I think the space where those images are is so limited there isn't room for them side by side.

The problem with snippets is that sometimes it's rest of the HTML/CSS that is the problem.

jernatety

Apr 13 2019, 09:33 AM

QUOTE(pandy @ Apr 13 2019, 10:17 AM)

Yep, so weird. Here's the entire template I made, there's actually plenty of space but for some reason it keeps getting flipped to vertical in email.

CODE

<html>
<body>
<table align="center" border="0" cellspacing="6" cellpadding="12" width="720" >
<tr>
<td bgcolor="#E7EAEF">
<table width="90%" align="center"><tr><td align="center">
<b>
<a href="https://www.mysite.com"><img src="https://www.mysite.com/images/img.png" /></a>
<table>
<tr>
<td><a href="https://www.instagram.com" target="_blank"><img src="https://www.mysite.com/images/insta.png" width="35" height="35" alt="mysite Instagram"></a></td>
<td><a href="https://www.facebook.com" target="_blank"><img src="https://www.mysite.com/images/facebook.png" width="35" height="35" alt="mysite Facebook"></a></td>
<td><a href="https://twitter.com"><img src="https://www.mysite.com/images/twitter.png" width="35" height="35" alt="mysite Twitter"></a></td>
<td><a href="https://www.youtube.com/channel/" target="_blank"><img src="https://www.mysite.com/images/youtube.png" width="35" height="35" alt="mysite Youtube"></a></td>
<tr/>
</table>
<font size="5" color="#334466">MYSITE DIGEST</font>
<br>
<font size="2" color="#334466">April 8, 2019             Issue #1</font></b></td></tr></table>
<hr>
<div align="justify">Hello, we'd like to thank you for your support @ Mysite. <br />
This marks the first run of our Newsletter, or "Digest". This will serve as a resource to keep you up to speed with what is going on the world of Mysite.com. We will send out a newsletter every 2 weeks, give or take, or based on turnover of existing and new content. If you'd like to provide feedback we are listening, especially for suggestions. Feel free to reply to this email.</div>
<hr>
<table cellpadding="0" cellspacing="0"><tr><td><font size="4" color="#334466"><u><strong>FEATURED</strong></u></font></td></tr></table>
<ul>
<li><a href="https://www.mysite.com/index.php?topic=1021">Article</a></li>
<li><a href="https://www.mysite.com/index.php?topic=1027">Article</a></li>
<li><a href="https://www.mysite.com/index.php?topic=838">Article</a></li>
<li><a href="https://www.mysite.com/index.php?topic=938">Article</a></li>
<li><a href="https://www.mysite.com/index.php?topic=1010">Article</a></li>
</ul>
<hr>
<table cellpadding="0" cellspacing="0"><tr><td><font size="4" color="#334466"><u><strong>CURRENT DISCUSSION</strong></u></font></td></tr></table>
<ul>
<li><a href="https://www.mysite.com/index.php?topic=1032">Article</a></li>
<li><a href="https://www.mysite.com/index.php?topic=991">Article</a></li>
<li><a href="https://www.mysite.com/index.php?topic=1033">Article</a></li>
<li><a href="https://www.mysite.com/index.php?topic=1011">Article</a></li>
<li><a href="https://www.mysite.com/index.php?topic=969">Article</a></li>
<li><a href="https://www.mysite.com/index.php?topic=987">Article</a></li>
<li><a href="https://www.mysite.com/index.php?topic=1028">Article</a></li>
<li><a href="https://www.mysite.com/index.php?topic=1031">Article</a></li>
<li><a href="https://www.mysite.com/index.php?topic=1018">Article</a></li>
<li><a href="https://www.mysite.com/index.php?topic=998">Article</a></li>
</ul>
<hr>
<table cellpadding="0" cellspacing="0"><tr><td><font size="4" color="#334466"><u><strong>SPONSORSHIP/HOW TO'S</strong></u></font> </td></tr></table>
<ul>
<li><a href="https://www.mysite.com/index.php?topic=1034">Sponsorship and Ad placement opportunities</a></li>
<li><a href="https://www.mysite.com/index.php?topic=951">How do I post a new topic?</a></li>
<li><a href="https://www.mysite.com/index.php?topic=695">Requests: Adds, Changes, and Modifications</a></li>
</ul>
<hr>
Thank you,<br />
Mysite Team<br />
<br>
<div align="center"><a href="https://www.facebook.com/groups/"><img src="https://www.mysite.com/images/fbyhi1.png" /></a></div>
</td>
</tr>
</table>
</body>
</html>

Christian J

Apr 13 2019, 10:44 AM

QUOTE(jernatety @ Apr 13 2019, 04:33 PM)

Here's the entire template I made

This is meant to be the new one with a table layout, right?

There are still some errors you may want to fix (the HTML validator can point them out, but then you first need to add an HTML5 Doctype and a TITLE element or you'll drown in errors).

jernatety

Apr 13 2019, 10:58 AM

Correct, that is the code I'm using for my newsletter. It publishes without any errors in email. I don't have it on my website, I will only use it for sending out newsletters.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.