Help - Search - Members - Calendar
Full Version: In-line Social Icons Turned Vertical in Email
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
jernatety
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
<div align="center">
<div style="display: inline-block;">
<a href="http://www.mysite.com" target="_blank"><img src="https://www.mysite.com/images/insta.png" width="35" height="35" alt="Instagram"></a></div>
<div style="display: inline-block;">
<a href="http://www.mysite.com" target="_blank"><img src="https://www.mysite.com/images/facebook.png" width="35" height="35" alt="Facebook"></a></div>
<div style="display: inline-block;">
<a href="http://www.mysite.com" target="_blank"><img src="https://www.mysite.com/images/twitter.png" width="35" height="35" alt="Twitter"></a></div>
<div style="display: inline-block;">
<a href="http://www.mysite.com" target="_blank"><img src="https://www.mysite.com/images/youtube.png" width="35" height="35" alt="Youtube"></a></div>
</div>
Christian J
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
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
<div align="center">
<span style="display: inline-block;">
<a href="http://www.mysite.com" target="_blank"><img src="https://www.mysite.com/images/insta.png" width="35" height="35" alt="Instagram"></a></span>
<span style="display: inline-block;">
<a href="http://www.mysite.com" target="_blank"><img src="https://www.mysite.com/images/facebook.png" width="35" height="35" alt="Facebook"></a></span>
<span style="display: inline-block;">
<a href="http://www.mysite.com" target="_blank"><img src="https://www.mysite.com/images/twitter.png" width="35" height="35" alt="Twitter"></a></span>
<span style="display: inline-block;">
<a href="http://www.mysite.com" target="_blank"><img src="https://www.mysite.com/images/youtube.png" width="35" height="35" alt="Youtube"></a></span>
</div>


Darin McGrew
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
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
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
Nope, that doesn't work either.

CODE
<span style="border-style: solid; color: #E7EAEF;">
<span style="display: inline-block;">
<a href="http://www.mysite.com" target="_blank"><img src="https://www.mysite.com/images/insta.png" width="35" height="35" alt="Instagram"></a></span>
<span style="display: inline-block;">
<a href="http://www.mysite.com" target="_blank"><img src="https://www.mysite.com/images/facebook.png" width="35" height="35" alt="Facebook"></a></span>
<span style="display: inline-block;">
<a href="http://www.mysite.com" target="_blank"><img src="https://www.mysite.com/images/twitter.png" width="35" height="35" alt="Twitter"></a></span>
<span style="display: inline-block;">
<a href="http://www.mysite.com" target="_blank"><img src="https://www.mysite.com/images/youtube.png" width="35" height="35" alt="Youtube"></a></span>
</span>
pandy
I think this will.

HTML
<div align="center">
<a href="http://www.mysite.com" target="_blank"><img src="https://www.mysite.com/images/insta.png" width="35" height="35" alt="Instagram"></a>
<a href="http://www.mysite.com" target="_blank"><img src="https://www.mysite.com/images/facebook.png" width="35" height="35" alt="Facebook"></a>
<a href="http://www.mysite.com" target="_blank"><img src="https://www.mysite.com/images/twitter.png" width="35" height="35" alt="Twitter"></a>
<a href="http://www.mysite.com" target="_blank"><img src="https://www.mysite.com/images/youtube.png" width="35" height="35" alt="Youtube"></a>
</div>


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. wink.gif
Christian J
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
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
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
QUOTE(pandy @ Apr 13 2019, 10: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.


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 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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
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
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.
Invision Power Board © 2001-2019 Invision Power Services, Inc.