I know most of you are lucky not to deal with this, but unfortunately I have to, so...
I have a client who is sending emails from Outlook, and I've been creating some .oft templates for her. All is good, she is fine that email is not responsive and most of these are internal emails that got opened in Outlook anyway.
But, whenever I have an image header as a first thing in the email, the Outlook preview pane is displaying IMAGE URL as a first line in message preview instead of image alt tag or anything else for that matter.
Not sure if there's a fix for this? Any help is appreciated.
Tried adding the alt tag to the header image, changing it in Outlook before sending - nothing helps.
Outlook 2013-2019 will preview the first 35 characters of an email. You have two choices, you could instruct your client to always start with text and treat it like a secondary subject line or you can add a hidden area with 35 in a row so that the client can start with an image, but then you lose out on preview text.
<div style="font-size: 1px; line-height:1px; display: none !important; mso-hide:all;"> </div>
Or...
<div style="font-size: 1px; line-height:1px; display: none !important; mso-hide:all;">Dealing with Outlook's shortcomings</div>
The easiest might be to convince them to make it a second subject line for every message so they get into the habit of using this so that the url issue never shows up again.
More information on preview text:
https://litmus.com/blog/the-ultimate-guide-to-preview-text-support
Good luck.
Related
I have a problem when I genereate email via MJML. The email looks great, but there is a problem in Outlook where it shows the source url of the first image in the mail instead of texts or the alt-text in the short description of the email. I'm expecting it might have something to do with that we use CDN to hosts our images, but I have no clue. See the image below:
Does anyone know what I can do to solve this issue?
Not sure why its not showing your alt text, it should work that way, in any case you can always add your preview text to the html directly after the body tag and hide it with css like this:
<body>
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;margin-right:100%;">
Your Preview Text Here
</div>
I'm having an issue with gaps appearing in Outlook / windows in an html email which I can't fix. It's a common problem I know and possibly something to do with col spans (judging by other posts). I've tried a number of things to do with line heights (although height doesn't appear to be the issue here) and adding ms specific styling but to no avail.
You can see the code here:
http://www.theindustryclub.co.uk/xmas/ticChristmasTemplate_card.html
and see the problem here
http://www.theindustryclub.co.uk/xmas/images/industryClubMailing.jpg
It's looking tight in all other clients and web based mail apps - just pesky outlook 2013 dragging me down and got me stumped. I would be grateful for any suggestions / help.
Martin
Make sure all your images are inline styled display:block;
Don't use colspan or rowspan.. use nested tables instead.
Set table, table td { border-collapse:collapse } in the head
Check your cellpadding values to see if they are pushing the content out.
Here's a template you may find useful.
I manage/webmaster half a dozen websites that have facebook like boxes on their index pages. These were all working fine until yesterday, when suddenly they all began to display to the right of the page (where previously they had been centered). No changes have been made to any of these pages in the last day or two, so I can't think of any reason why they would all suddenly right-align.
Some of these scripts are between "center" tags, Others are inside centered tables. But they're still displaying to the right of the page. I've tried everything I can think of to get them to display in the middle of the page again, but nothing I've tried works. I'm also curious to know why they would all suddenly lose their center alignment.
Anyone have any ideas?
Any help would be very much appreciated.
You can see an example of what I'm talking about at holisticspain-dot-net
.fb-like-box.fb_iframe_widget *
{
text-align: left !important;
}
This worked as a temporary fix as well.
We already apply some styling to our button (it is surrounded in <li> tags, but we found we had to change the style for this.
We previously had this style applied
.fb-tool {position:relative;left:8px;}
We changed it to this.
.fb-tool {position:relative;left:8px; text-align:left;}
Just a short answer - might help perhaps. I changed the display property of .fb_iframe_widget to relative with !important and it fixed the sudden leftiness.
Following Harold Neal and Sergei S's suggestions, you can add text-align:left; to the default style="background-color:#000000;" portion of the tag.
Is there an (easy) way to customise the look of the facebook like button implemented via fbml?
I am pretty sure I saw this somewhere, but I cant remember where and I cant find any documentation on this.
You don't need to make these illegal hacking. Just use the "Open Graph": https://developers.facebook.com/docs/opengraph/actions/builtin/likes/. The downside is you need to create an app.
Are you guys lawyers or programmers? the question was HOW not '...to do or not to do...'.
#pixelistik button can be inserted either via script tag or iframe and of course you can use css with iframe just via JS, easy peasy.
#skrat good point!
#Slavic what service exactly? I call it half-service because you can like only - no place for criticism so... your criticism is not proper. Like our posts! :P
generally: if you create custom button and you didn't sign to any t&c or something like that you can do whatever you want on YOUR webpage.
Although it may not even be legal to do so (check the terms and policies for yourself), you could do something like:
/* Like button main text color */
div.like span.connect_widget_text {color:#fff;}
div.like div.connect_widget_confirmation {color:#fff;}
div.like span.connect_widget_text a {color:#ffc6ff;}
This link shows some mild styling options:
http://forum.developers.facebook.net/viewtopic.php?pid=236534
Easy peasy:
Simply set the opacity (filter for ie) to 0 and put the iframes over an image or div with a bg image. For bigger buttons simply load in multiple like buttons, don't load in too many this will make your page unbearable slow.
Hiya, you can do it with some smart CSS - http://www.esrun.co.uk/blog/disguising-a-facebook-like-link/
Although the legality of such edits is under question, I just wanted to share my findings on this subject.
I right clicked on a FB Like button in Firefox, and inspected the element with firebug. The readout of the class elements is:
.connect_widget_like_button .liketext {
background: url(http://static.ak.fbcdn.net/rsrc.php/v1/y7/r/ql9vukDCc4R.png) -1px -33px no-repeat;
background-image: url(http://static.ak.fbcdn.net/rsrc.php/v1/y7/r/ql9vukDCc4R.png);
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-position-x: -1px;
background-position-y: -33px;
background-origin: initial;
background-clip: initial;
background-color: initial;
}
This exists on line 172 of like.php
One company I know of that does use a custom like graphic is Disqus, however their button is a multi-functional element that offers you a choice between facebook & twitter onClick, which may be how they were able to customize it to their needs.
I have an accordion control that is generated in code. Earlier today it stopped rendering correctly in IE8. It would function ok, but sometimes the layout would get corrupted, and all kinds of weird graphical glitches occured. It did not fail in firefox.
I reset my IE settings to factory defaults and it fixed it. It works perfectly on another test machine, but on some of the machines on our network the graphical issues occur.
Has anyone else experienced the same or know a fix? All of our computers run internet explorer 8. If it becomes a big problem I will try forcing compatibility mode but I would prefer a more permenant fix (and also that might not even fix the issue!).
I've had issues like this in the past, most typically an issue with some CSS settings. If you use the developer tools in IE, look to see what CSS settings are being applied and try to rule that out.
A screenshot of what is happening and what should happen would be useful along with the code sample.
On your accordion headers only, place the following css code:
.accordionHeader { display: table; width: 100%; }
If you find that the headers still jump when hovering between them, use a border-top using a solid colour rather than using margin and padding. Of course this only works on designs ontop of solid colours (the border colour would need to match the background colour). Heres an example:
.accordionHeader { border-top: 10px solid #FFFFFF; }
This will fix IE8 right up! This has taken me a year to figure out lol.