I wrote a php script to send a message, with html formatting and custom css styles,
to a facebook user. The message can be seen in his private message box.
it would be perfect if html formatting was kept on.
The only way I found to do that was to put the style inline (as a tag attribute)
instead of writing an internal style section or using an external css file.
ex: <div style="width:100px">
But I have two problems.
image in img tag does not display and I cannot insert a wrapper block to fit the whole message width.
How can I do that properly?
Not sure what quirks facebook has, but it is best practice to include inline styling and also using tables in html email. For your image to work, it probably needs to be hosted online, not embedded.
Assuming facebook doesn't strip any code out, a simple table like this should fit the width:
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td style="padding:20px; padding-bottom:0;">
<img style="margin: 0; border: 0; padding: 0; display: block;" src="http://lorempixel.com/400/200/sports/" width="400" height="200" alt="">
</td>
</tr>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000; padding:20px;">
Content here.
</td>
</tr>
</table>
Note - this is not a full html email structure, just a table that should be placed inside your body section.
Related
I would like to make the font size responsive in my email signature. VW is exactly what I need, but doesn't appear to work in outlook. I've tried css, but I believe it needs to be inline CSS, and I'm not sure how to incorporate #media screen inline.
I've tried em, this also doesn't resize.
<body style="padding:0; margin:0">
<table width="700" cellspacing="0" cellpadding="0" bgcolor="#">
<tr>
<td bgcolor="#ffffff" width="700" valign="top">
<div style="overflow-x:auto;">
<table border="0" cellspacing="0" cellpadding="0" width="700">
<tr>
<td align="left" width="30%" style="vertical-align:bottom";>
<img src="https://grapaes.com/signatures/Grapa%20and%20tag.png?
_t=1563094564" alt="Logo" border="0" style="display:block" /></td>
<td style="width: 70%; height:auto; vertical-align:bottom;">
<span style="font-size: 1vw; font-family:'Raleway', sans-serif, Arial;
color: #9d2347; font-weight: bold;">Full Name</span><br />
<span style="font-size: .9em; font-family:'Raleway', sans-serif, Arial;
color: #5f6062; font-weight: 300;">Job descrtiption</span><br />
span style="font-size: .85em; font-family:'Raleway', sans-serif, Arial;
color: #5f6062; font-weight:300;">Phone: number here<br />
Website: <a href="http://www.grapaes.com"><font color="5f6062">
website/u>
</div>
</body>
It doesn't look terrible on mobile, but the font is just a tad too small, and nothing I do seems to increase it.
The overflow-x CSS element is not supported in Outlook. You can find supported and unsupported HTML elements, attributes, and cascading style sheets properties described in the following articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
Outlook uses Word as an email editor for displaying your HTML markup. So you should follow to rules defined for Word if you want to get a nice view.
I found this on another thread on Stackoverflow, why I couldn't find it before I posted the question, I'm not sure:
font-size: calc(7px + .5vw);
This syntax worked, and finally allowed me to have scalable text. It can be easily read in mnobile now.
I'm trying to create a web-mail template with a zebra-striped style that looks the same on different clients. This template comes out from a third party application ( that I cannot control ) that iterates over candidates and the only thing that i can do is, for each candidate, to create a partial, something like this pseudo-code:
for(candidate of candidates) {
<table class="zebra" width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse">
<tbody>
<tr>
<td style="padding-left:28px;"> </td>
<td class="colored-dome" valign="top" width="600" style="text-align: left; font-family:Arial; text-transform:uppercase; color:#ffffff; text-decoration:none; font-size:18px; padding:5px 38px 5px 10px;">
<span>^candidate.role^</span>
</td>
<td style="padding-left:28px;"> </td>
</tr>
</tbody>
</table>
}
As you can see here i'm using a css class:
table.zebra:nth-child(odd) td.colored-dome {
background-color:#8274b6;
}
table.zebra:nth-child(even) td.colored-dome {
background-color:#9d9d9d;
}
because I can't use nth-child: selector inline. So I tryed:
<style> tag inside <head> ,
<style> tag inside <body> (as an attempt),
css file from working remote url,
but none of this solution works on outlook 2010, hotmail, gmail. So my question is: is there a way to create a working web-mail-zebra-striped for those clients? Can we say that these solutions will never work for Hotmail, Gmail or Outlook?
nth-child does not work in Outlook or Gmail and a few other clients.
https://www.campaignmonitor.com/css/selectors/nth-child/
The solution to ensure this always works is to inline the style you want for those email clients.
Does anybody know why the © and ® don't superscript nicely without affecting the leading (i.e. line-height) like ™ and ℠ do?
I've tried wrapping © and ® with <sup> and even <small> but I can't get it to work the way I need it to. Sometimes changing the font size helps but not always.
This is for HTML emails where we use it in <h1>, subheads, and body copy.
When I do wrap it in <sup> and apply CSS it just becomes difficult to control. It behaves differently from one email client to another, and one device to another (this is for responsive emails).
Here's the fiddle: http://jsfiddle.net/cy03eov1/5/
And of course position: and em don't work well in email and margin support is spotty.
body {
font-size: 26px;
line-height: 1em;
color: #ccc;
font-family: Helvetica, sans-serif;
background: lightslategray;
}
table {
width: 80%;
margin: 30px auto 0;
background: #fff;
padding: 5px 20px;
}
.copyright {
font-size:70%;
}
<table cellspacing="0" border="0">
<tr>
<td>
<p>Do you know that horrible fear when you’ve broken something on a client project and you have no idea how to fix it? I do… Sometimes I’ll have been<span class="copyright" style="color:red;"><sup>©</sup></span> wading through templates on a site, getting it all up to scratch, then suddenly I’m faced with a page of doom—a whole<span style="color:red; font-size: 70%; vertical-align:text-top;">®</span> page of garbled semi-English that sort of resembles an error<span style="color:red;">™</span> message, but nothing I’ve ever seen before.</p>
<p>As a freelancer, I’ve always been proud to have the time to dedicate to learning<span style="color:red;">℠</span>. Keeping up with the industry, and being able to level up my skills on each new project, is very important to me.</p>
<p>But sometimes I struggled when I pushed myself that little bit too far. A few times I’ve had to request a lifeline from kind people on Twitter to pull me out of a hole. And then I feel a bit daft, having to admit my inadequacies on a social network in order to save myself from a worse situation.</p>
</td>
</tr>
</table>
Unicode does not have superscript or subscript glyphs for these characters so you have to modify the font style separately
http://jsfiddle.net/cy03eov1/8/embedded/result/
I just added
p span { }
and made the font smaller and moved it up by 8 pixels.
I noticed you mentioned your doing this for an email. While the above mentioned solution would work fine for a webpage, it's best not to use CSS in email, especially positioning attributes like position:relative;
You can achieve the same affect with tables though (see demo)
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" style="font-size:18px;">Line of text followed by a </td>
<td height="20">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="10" style="font-size:9px;">©</td>
</tr>
<tr>
<td height="10"><table border="0" cellpadding="0" cellspacing="0"><tr><td><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table></td><!-- this is a standard table spacer alternative to email shim -->
</tr>
</table>
</td>
<td height="20" style="font-size:18px;">character.</td>
</tr>
</table>
Takes a lot more work but works across all email clients.
I have been working on this newsletter for a customer. Everything looks perfect and exactly the way I want it to. Even Outlook understands the newsletter but then.. Gmail.. I really don't understand what is wrong with Gmail in the browser. I have this piece of code.
<table class="w650" width="650" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td height="20"></td>
</tr>
<tr>
<td width="225" bgcolor="#e1822d" valign="top" align="left">
<div style="padding:12px 20px 0px 20px;">
<div style="font-family:arial;font-size:20px;color:#FFFFFF;line-height:36px;">
<singleline label="Title">Tenerife</singleline>
</div>
<div style="font-family:arial;font-size:11px;color:#FFFFFF;line-height:20px;">
<multiline label="Description">Click to see all properties <br /> Lorem Ipsum Dolor sit amet</multiline>
</div>
</div>
</td>
<td width="425" valign="top" align="left">
<img editable="true" src="images/side_image_01.jpg" label="Image" width="425" border="0" style="border:none;" alt="Image" />
</td>
</tr>
</tbody>
</table>
And in every other mail client it outputs like this:
But in Gmail and Gmail only it outputs with an additional size in the orange column:
I know it is silly to focus on but it really annoys me that my HTML code is bullet proof and even old Outlook mail clients can show it right but then Gmail twists it.
Does anybody know what I should type either in the inline css or head css or anything - to make Gmail understand?
Add display: block; to the image tag's style attribute or img { display: block; } if you have a <style> section anywhere and need to apply this to other images as well.
For some reason Gmail adds extra margin to images that aren't explicitly specified as display: block.
Each mail client has different HTML rendering technique.
I can not really find out the difference from both the images. I see both images are identical.
From what I have understood, All I can say is, you can set fixed width inline in order to force Gmail to use your styling. !important can help you to force the styling.
Hi i have a issue in outlook 2010 i want to give 10px space between the tds but its not working. please help.
<table style="cellspacing:0px;cellpadding:0px;border:0;border-spacing:10px;">
<tbody>
<tr>
<td id="cont0" align="top" style="border-collapse:collapse;padding:0;overflow: hidden;height: 96px; width: 96px;margin-right:auto;vertical-align:top;border: 1px solid #CCCCCC;">
<a id="link0" href="#" style="border:0">
<img id="previewimage0" style="border:0" src="http://i.sample.com/00/s/MTY2WDIwMA==/$(KGrHgoS,KEEk,K!Bv9GBQIi!CNhLg~~60_0.JPG">
</a>
</td>
<td id="cont1" align="top" style="border-collapse:collapse;padding:0;overflow: hidden;height: 96px; width: 96px;margin-right:auto;vertical-align:top;border: 1px solid #CCCCCC;">
<a id="link1" href="#" style="border:0">
<img id="previewimage1" style="border:0" src="http://i.sample.com/00/s/MTQ5WDIwMA==/$(KGrHqERQ,IE+tWswcklBQIi!C8rQg~~60_0.JPG">
</a>
</td>
</tr>
</tbody>
</table>
try adding a table cell between them with the width of 10px :
</td>
<!-- your first td ends -->
<!-- the spacer td -->
<td align="top" width="10> </td>
<!-- your second td begins -->
<td id="cont1" align="top">
Works for my email templates everytime in all email clients.
Try adding the cellspacing property to the table tag
<table cellspacing="10" style="border:0;">
Marks answer will do the job perfectly, don't add cellspacing or cellpadding as it is incredibly inconsistent across email clients, I would also say don't use margin and padding for the same reason but in rare cases where you cannot use any other spacing method you wont have any choice. For your border I would also avoid using the shorthand and set each part of the border individually:
border-color: #ffffff;
border-style: solid;
border-width: 1px;
as some clients will just ignore the shorthand version.
where possible you should use html styling rather than inline css, as even though inline is the only real way to use css, html is still more widely recognised across older email clients.
valign="top"
cellpadding="0"
cellspacing="0"
all of these can be added to the tag rather than including them in styles. This will ensure any old clients or even just company webmails wont kick up a fuss.
I know you didn't ask about it, but just for consistencies sake I thought I would point that out.