The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> In-line Social Icons Turned Vertical in Email
jernatety
post Apr 12 2019, 11:12 AM
Post #1





Group: Members
Posts: 8
Joined: 12-April 19
Member No.: 26,876



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 12 2019, 01:08 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,127
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jernatety
post Apr 12 2019, 01:24 PM
Post #3





Group: Members
Posts: 8
Joined: 12-April 19
Member No.: 26,876



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>


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 12 2019, 02:21 PM
Post #4


WDG Member
********

Group: Root Admin
Posts: 8,294
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jernatety
post Apr 12 2019, 04:08 PM
Post #5





Group: Members
Posts: 8
Joined: 12-April 19
Member No.: 26,876



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 12 2019, 05:09 PM
Post #6


.
********

Group: WDG Moderators
Posts: 8,127
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jernatety
post Apr 12 2019, 05:56 PM
Post #7





Group: Members
Posts: 8
Joined: 12-April 19
Member No.: 26,876



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 12 2019, 09:28 PM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,232
Joined: 9-August 06
Member No.: 6



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
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 13 2019, 04:05 AM
Post #9


.
********

Group: WDG Moderators
Posts: 8,127
Joined: 10-August 06
Member No.: 7



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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jernatety
post Apr 13 2019, 06:43 AM
Post #10





Group: Members
Posts: 8
Joined: 12-April 19
Member No.: 26,876



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.

This post has been edited by jernatety: Apr 13 2019, 07:01 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 13 2019, 09:17 AM
Post #11


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,232
Joined: 9-August 06
Member No.: 6



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.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jernatety
post Apr 13 2019, 09:33 AM
Post #12





Group: Members
Posts: 8
Joined: 12-April 19
Member No.: 26,876



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>



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 13 2019, 10:44 AM
Post #13


.
********

Group: WDG Moderators
Posts: 8,127
Joined: 10-August 06
Member No.: 7



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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jernatety
post Apr 13 2019, 10:58 AM
Post #14





Group: Members
Posts: 8
Joined: 12-April 19
Member No.: 26,876



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 26th April 2019 - 09:11 AM