In-line Social Icons Turned Vertical in Email |
In-line Social Icons Turned Vertical in Email |
jernatety |
Apr 12 2019, 11:12 AM
Post
#1
|
Newbie Group: Members Posts: 12 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> |
Christian J |
Apr 12 2019, 01:08 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 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.
|
jernatety |
Apr 12 2019, 01:24 PM
Post
#3
|
Newbie Group: Members Posts: 12 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> |
Darin McGrew |
Apr 12 2019, 02:21 PM
Post
#4
|
WDG Member Group: Root Admin Posts: 8,365 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. |
jernatety |
Apr 12 2019, 04:08 PM
Post
#5
|
Newbie Group: Members Posts: 12 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? |
Christian J |
Apr 12 2019, 05:09 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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
Post
#7
|
Newbie Group: Members Posts: 12 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> |
pandy |
Apr 12 2019, 09:28 PM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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. |
Christian J |
Apr 13 2019, 04:05 AM
Post
#9
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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
Post
#10
|
Newbie Group: Members Posts: 12 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 |
pandy |
Apr 13 2019, 09:17 AM
Post
#11
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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. |
jernatety |
Apr 13 2019, 09:33 AM
Post
#12
|
Newbie Group: Members Posts: 12 Joined: 12-April 19 Member No.: 26,876 |
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 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
Post
#13
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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
Post
#14
|
Newbie Group: Members Posts: 12 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.
|
Lo-Fi Version | Time is now: 25th April 2024 - 07:04 AM |