When I send my email signature from an iPhone and view it at gmail.com the text starts overlapping. I have checked all settings on the phone and all text size etc is defaulted. I don't have any line-height anywhere and after I paste I am shaking the phone to 'undo' to stop picking up the default character attributes. By removing sections of text I managed to isolate that the top table is causing the problem - if I remove that it works, but then my text doesn't sit side-by-side with the image.
Anyone see anything else i've missed? Have spent hours and feel like i'm hitting a brick wall.
<body>
<table cellpadding="0" cellspacing="0" border="0" height="200" width="550" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;"><tr><td style="border-right: solid 1px #c1c1c1; padding-right: 0px; display: block; clear: both;"><img src="https://url.com/portfolio.jpg" width="133px" height="200px"></td>
<td style="padding-top: 0; padding-bottom: 0; padding-left: 15px; padding-right: 0;">
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;"><tr><td colspan="2" style="padding-bottom: 0px; color: #221f1f; font-size: 16px; font-family: Arial, Helvetica, sans-serif; font-weight:bold;"><img src="https://www.url.com/emailsig/logo.png" width="250px"></td></tr>
<tr><td colspan="2" style="padding-bottom: 10px; padding-top: 5px; color: #221f1f; font-size: 21px; font-family: Arial, Helvetica, sans-serif; font-weight:bold;">Name Here</td></tr>
<tr><td colspan="2" style="padding-bottom: 2px; color: #70bcc9; font-size: 16px; font-family: Arial, Helvetica, sans-serif; font-weight: bold;">Title</td></tr>
<tr><td colspan="2" valign="top" style="vertical-align: top; color: #545454; font-size: 13px; font-family: Arial, Helvetica, sans-serif; padding-top:0px; padding-bottom: 3px;"><span style="color: #9eb333; font-weight:bold;">► </span>mywebsite.com</tr>
<tr><td colspan="2" valign="top" style="vertical-align: top; color: #545454; font-size: 13px; font-family: Arial, Helvetica, sans-serif; padding-top:0px; padding-bottom: 5px;"><span style="color: #9eb333; font-weight:bold;">►</span> 555-555-5555 <span style="color: #9eb333; font-weight:bold;">►</span> 555-555-5555</tr>
<tr><td colspan="2" valign="top" style="vertical-align: top; color: #545454; font-size: 13px; font-family: Arial, Helvetica, sans-serif; padding-bottom: 7px;">Location</td></tr>
<tr><td valign="top" style="vertical-align: top; color: #9eb333; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"><img src="https://www.myurl.com/emailsig/tw-facebook.png" width="18px" height="18px">
<img src="https://www.myurl.com/emailsig/tw-instagram.png" width="18px" height="18px">
<img src="https://www.myurl.com/emailsig/tw-youtube.png" width="18px" height="18px">
<img src="https://www.myurl.com/emailsig/tw-linkedin.png" width="18px" height="18px"><span style="display: inline-block;"> » JOIN OUR MAILING LIST</span></td></td></tr>
</table>
</td></tr></table>
<p style="color: #545454; font-size: 10px; font-family: Arial, Helvetica, sans-serif; padding-top:0px;">Confidentiality text to go here.</p>
</body>
Edited to include screenshot of how it looks (the confidentiality text is overlapping)
Can you try this one? I have just corrected a few errors
<body>
<table cellpadding="0" cellspacing="0" border="0" height="200" width="550" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr>
<td style="border-right: solid 1px #c1c1c1; padding-right: 0px; display: block; clear: both;"><a href="https://www.url.com"><img src="https://url.com/portfolio.jpg" width="133px"
height="200px"></a></td>
<td style="padding-top: 0; padding-bottom: 0; padding-left: 15px; padding-right: 0;">
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr>
<td style="padding-bottom: 0px; color: #221f1f; font-size: 16px; font-family: Arial, Helvetica, sans-serif; font-weight:bold;">
<img src="https://www.url.com/emailsig/logo.png" width="250px"></td>
</tr>
<tr>
<td style="padding-bottom: 10px; padding-top: 5px; color: #221f1f; font-size: 21px; font-family: Arial, Helvetica, sans-serif; font-weight:bold;">
Name Here</td>
</tr>
<tr>
<td style="padding-bottom: 2px; color: #70bcc9; font-size: 16px; font-family: Arial, Helvetica, sans-serif; font-weight: bold;">
Title</td>
</tr>
<tr>
<td valign="top" style="vertical-align: top; color: #545454; font-size: 13px; font-family: Arial, Helvetica, sans-serif; padding-top:0px; padding-bottom: 3px;">
<span style="color: #9eb333; font-weight:bold;">► </span>mywebsite.com
</td>
</tr>
<tr>
<td valign="top" style="vertical-align: top; color: #545454; font-size: 13px; font-family: Arial, Helvetica, sans-serif; padding-top:0px; padding-bottom: 5px;">
<span style="color: #9eb333; font-weight:bold;">►</span> 555-555-5555
<span style="color: #9eb333; font-weight:bold;">►</span> 555-555-5555
</td>
</tr>
<tr>
<td valign="top" style="vertical-align: top; color: #545454; font-size: 13px; font-family: Arial, Helvetica, sans-serif; padding-bottom: 7px;">
Location</td>
</tr>
<tr>
<td valign="top" style="vertical-align: top; color: #9eb333; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">
<a href="https://www.facebook.com/"><img
src="https://www.myurl.com/emailsig/tw-facebook.png" width="18px" height="18px"></a>
<a href="https://www.instagram.com/"><img
src="https://www.myurl.com/emailsig/tw-instagram.png" width="18px"
height="18px"></a>
<a href="https://www.youtube.com/"><img src="https://www.myurl.com/emailsig/tw-youtube.png"
width="18px" height="18px"></a>
<img src="https://www.myurl.com/emailsig/tw-linkedin.png" width="18px" height="18px">
<br> <br>
<span style="display: inline-block;"> » JOIN OUR
MAILING LIST</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p style="color: #545454; font-size: 10px; font-family: Arial, Helvetica, sans-serif; padding-top:0px;">
Confidentiality text to go here.</p>
</body>
As well as the fixes Rasmus has made to the code, this seems to be an issue on send/forward.
What happens if you place the confidentiality text in it's own 100% table?
Related
It is possible to implement busy indicator to indicate the processing of the controller for form postback call without using AJAX?
Try this using html. Add this in common view. Using java-script call the ID where ever you want like this $("#loading").show() to show and $("#loading").hide() to hide
<div id="loading" style="display: none;">
<table style="height: 100%; border: 0; width: 100%; position: fixed; top: 0; left: 0; background-color: #FAFAFA; opacity: 0.8; filter: alpha(opacity=80); z-index: 9000;">
<tbody>
<tr>
<td style="width: 100%; text-align:center; vertical-align : middle;"> <div id="Loadingtext" style="font-family: Arial; font-size: 24px; opacity: 1; filter: alpha(opacity=100); font-weight: bold; color: #000000; text-align: center; padding-top: 5px;">Please wait</div>
</td>
</tr>
</tbody>
</table>
</div>
I'm trying to embedded ruby content in a MSO conditional in a mailer.html.erb in a rails server.
Because dosen't seem to work since href renders "www.example.com/edit/<%= #user[:id] %>/<%= #user[:reset_digest] %>" for mso.
<!--[if mso]>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="padding-right: 10px; padding-left: 10px; padding-top:10px; padding-bottom:10px;" align="center">
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.example.com/doctores/edit/<%= #user[:id] %>/<%= #user[:reset_digest] %>" style="height:42px; v-text-anchor:middle; width:170px;" arcsize="15%" strokecolor="#3AAEE0" fillcolor="#3AAEE0">
<w:anchorlock/>
<center style="color:#ffffff; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:16px;">
<![endif]-->
<a href="https://www.example.com/doctores/edit/<%= #user[:id] %>/<%= #user[:reset_digest] %>" target="_blank" style="display: inline-block;text-decoration: none;-webkit-text-size-adjust: none;text-align: center;color: #ffffff; background-color: #3AAEE0; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; max-width: 150px; width: 110px; width: auto; border-top: 0px solid transparent; border-right: 0px solid transparent; border-bottom: 0px solid transparent; border-left: 0px solid transparent; padding-top: 5px; padding-right: 20px; padding-bottom: 5px; padding-left: 20px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;mso-border-alt: none">
<span style="font-size:12px;line-height:24px;"><span style="font-size: 16px; line-height: 32px;" data-mce-style="font-size: 16px;">Corregir Datos</span></span>
</a>
Thanks
The only solution I have found is to string concat your ruby vars into the if block and output the whole mso conditional, something like so in your case:
<%== '<!--[if mso]>
<table width="100%" ...>
<tr>
<td style="...">
<v:roundrect ... href="https://www.example.com/doctores/edit/' + #user[:id] + '/' + #user[:reset_digest] + '" style="..." ...>
<w:anchorlock/>
<center style="...">
<![endif]-->' %>
Notice the use of the <%== 'raw' erb tag, I had inconsistent results with the regular escaped <%= tag.
Is frankly an ugly, hacky solution but then its not like using mso tags for emails is pretty ;)
I'm designing a basic HTML signature. I do the HTML code in Dreamweaver (Mac), open to preview in firefox/safari and select all and drag the HTML into apple mails signature composer. It works well, and the signature looks good on desktop and ipad but doesen't work on iphone/smaller screen.
The signature looks like this (i've blacked out personal details):
The problem is on the smaller iphone, some of the text stays left of the picture, and some does not fit and ends up under the photo but with a margin. What would be ideal is if on iphone, I could config so all text and icons display below the main picture all the way left with no margin. Is it possible to set a different set CSS styles for iphone in a HTML email? or is there another way I can make my code more responsive?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="sig-container" style="margin-top: 15px;padding-top: 6px; border-top: 1px dashed #ddd;">
<div style="float: left; margin: 2px 10px 5px 0px; border-right: 2px solid #000; padding-right: 30px; display: block;" id="photoWrapper"> <img src="http://websiteremoved/emailsm.jpg" id="sigPhoto" height="300px" width="200px"> </div>
<div style="margin-top:0px; margin-left: 74px;" id="sigDetailsWrapper"> <p style="font-family: Arial, sans-serif; font-size: 20px; line-height: 10px; color: #333; margin-top:10; margin-left:0; padding-left:0;"> <strong><span id="sigName">Name Removed</span></strong></span> <br>
<span id="sigTitle"><p style="font-family: Arial, sans-serif; font-size: 16px; line-height: 0px; color: #333; margin-top:0; margin-bottom:20px;margin-left:0; padding-left:0;">Title Removed | Title Removed</span><br>
<div><p style="font-family: Arial, sans-serif; font-size: 16px; line-height: 20px; color: #333;">
<span> email: emailremoved </span> <br>
<span> mobile: mobileremoved </span><br>
<span> web: websiteremoved</span> <br>
<span> facebook: facebook.com/facebookremoved</span> <br> <br>
<img src="http://websiteremoved/phone.jpg" height="62px" width="62px" style="color:#428BCA; text-decoration: none;" rel="nofollow">
<img src="http://websiteremoved/email.jpg" height="62px" width="62px" style="color:#428BCA; text-decoration: none;" rel="nofollow">
<img src="http://websiteremoved/web.jpg" height="62px" width="62px" style="color:#428BCA; text-decoration: none;" rel="nofollow"> </p> </div>
<div class="sep about" style="box-sizing: border-box;
background-attachment: scroll; height: 120px; position: relative;
-webkit-background-size: cover; background-size: cover;
background-image:
url('http://websiteremoved/about-sep.jpg');
z-index: 1; background-position: 50% -48.5px; background-repeat:
no-repeat no-repeat; "></div>
</div>
</body>
</html>
Yes, you can target iPhones using their retina screens. The media query should be "#media all and (min-device-pixel-ratio : 1.5)" For example...
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
#media all and (min-device-pixel-ratio : 1.5) {
#sigDetailsWrapper {margin-left: 0px !important;}
}
</style>
</head>
<body>
<div id="sig-container" style="margin-top: 15px;padding-top: 6px; border-top: 1px dashed #ddd;">
<div style="float: left; margin: 2px 10px 5px 0px; border-right: 2px solid #000; padding-right: 30px; display: block;" id="photoWrapper"> <img src="http://websiteremoved/emailsm.jpg" id="sigPhoto" height="300px" width="200px"> </div>
<div style="margin-top:0px; margin-left: 74px;" id="sigDetailsWrapper"> <p style="font-family: Arial, sans-serif; font-size: 20px; line-height: 10px; color: #333; margin-top:10; margin-left:0; padding-left:0;"> <strong><span id="sigName">Name Removed</span></strong></span> <br>
<span id="sigTitle"><p style="font-family: Arial, sans-serif; font-size: 16px; line-height: 0px; color: #333; margin-top:0; margin-bottom:20px;margin-left:0; padding-left:0;">Title Removed | Title Removed</span><br>
<div><p style="font-family: Arial, sans-serif; font-size: 16px; line-height: 20px; color: #333;">
<span> email: emailremoved </span> <br>
<span> mobile: mobileremoved </span><br>
<span> web: websiteremoved</span> <br>
<span> facebook: facebook.com/facebookremoved</span> <br> <br>
<img src="http://websiteremoved/phone.jpg" height="62px" width="62px" style="color:#428BCA; text-decoration: none;" rel="nofollow">
<img src="http://websiteremoved/email.jpg" height="62px" width="62px" style="color:#428BCA; text-decoration: none;" rel="nofollow">
<img src="http://websiteremoved/web.jpg" height="62px" width="62px" style="color:#428BCA; text-decoration: none;" rel="nofollow"> </p> </div>
<div class="sep about" style="box-sizing: border-box;
background-attachment: scroll; height: 120px; position: relative;
-webkit-background-size: cover; background-size: cover;
background-image:
url('http://websiteremoved/about-sep.jpg');
z-index: 1; background-position: 50% -48.5px; background-repeat:
no-repeat no-repeat; "></div>
</div>
</body>
</html>
You might want to recode this to use tables, though, as divs can often get messed up in Outlook, as well as Floats.
I've tried changing the line-height to 0, and that made the spacing considerably smaller, but there's still about one cm between each line....
When I wrote the HTML in htmledit(DOT)squarefree(DOT)com/ it looked very small
http://i.stack.imgur.com/NsBG5.png
but when I put it on my blog and saved, the spacing was greatly enlarged...
http://i.stack.imgur.com/utZ6m.png
The code I was entering is
<p <span title="Made by [name]" style="background-color:black; border: double 10px #FF0000; text-align: center; font-size: 50px; font-family: arial; color: #FF0000; text-shadow: 5px 5px 4px #8A0808;">Text<br /><span style="text-align: center; font-size: 25px; font-family: arial; color: #8A0808; text-shadow: 0px 0px 0px; line-height: 0;">text<br /><span style="text-align: center; font-size: 25px; font-family: arial; color: #8A0808; text-shadow: 0px 0px; line-height: 0;">text<br /><span style="text-align: center; font-size: 25px; font-family: arial; color: #8A0808; text-shadow: 0px 0px; line-height: 0">text<br /><span style="text-align: center; font-size: 25px; font-family: arial; color: #8A0808; text-shadow: 0px 0px; line-height: 0">text<br /><span style="text-align: center; font-size: 25px; font-family: arial; color: #8A0808; text-shadow: 0px 0px; line-height: 0">text<br /><span style="line-height: 0"><br /><span style="text-align: center; font-size: 15px; font-family: georgia; color: #FF0000; text-shadow: 0px 0px; line-height: 0"> © text</span style="line-height: 0" p>
Your code is pretty messy. Most of the tags aren't closed.
<tag> gets closed with </tag>
<p>some text for a paragraph</p>
<span style="some style">some text to be displayed in that style</span>
(With the exception of self-closing tags such as <input> and <img>.
If you put elements inside of other elements (called "nesting"), you have to properly close them (like above), but in reverse of the order they were opened.
<p>this is a paragraph
<span>this is a span inside the paragraph. it gets closed before the paragraph</span>
the span is now closed, and the paragraph can be closed
</p>
But nesting isn't necessary in your case. See this example that does what you want. Here's the HTML from it:
<div style="background-color:black; border: double 10px #FF0000; text-align: center; font-size: 25px; font-family: arial; color: #FF0000; text-shadow: 5px 5px 4px #8A0808;">
<!-- Text inside these special braces is called a comment. It isn't displayed on the page -->
<!-- Beginning of <p> element -->
<!-- Change the value of "line-height" here to space lines differently -->
<p style="line-height:25px">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
<!-- End of <p> element -->
<!-- The following "text" is in a separate <p> element, so it will be displayed by itself -->
<p>
text
</p>
</div>
I have an html document with internal links (i.e., <a name="blah"></a> tags) at the start of certain sections.
I want to visit each internal link, and grab all the text contained in all the elements recursively in between.
For example, in between these 2 links:
<A name='G27866101'>
<DIV align="left" style="margin-left: 0%; margin-right: 0%; font-size: 10pt; font-family: Arial, Helvetica; color: #000000; background: transparent">
<B><FONT style="font-family: 'Times New Roman', Times">About This Section</FONT></B>
</DIV>
</A>
<DIV align="left" style="margin-left: 0%; margin-right: 0%; text-indent: 3%; font-size: 10pt; font-family: 'Times New Roman', Times; color: #000000; background: transparent">
This section is part of a registration that we filed with the proper authorities ... blah ... for more information.
</DIV>
<A name='G27866102'>
I want to retrieve:
About This Section
This section is part of a registration that we filed with the proper authorities ... blah ... for more information.
And since the elements between links can have nested elements, I want to get all that text as well (i.e., recurse through each child element and get that text).
For example, from this:
<A name='G27866102'>
<DIV align="left" style="margin-left: 0%; margin-right: 0%; font-size: 10pt; font-family: Arial, Helvetica; color: #000000; background: transparent">
<B><FONT style="font-family: 'Times New Roman', Times">Additional Information</FONT></B>
</DIV>
</A>
<DIV align="left" style="margin-left: 0%; margin-right: 0%; text-indent: 3%; font-size: 10pt; font-family: 'Times New Roman', Times; color: #000000; background: transparent">
As permitted by house rules, this section is ...
<DIV><FONT style="font-family: 'Times New Roman', Times">There's nested text here<FONT></DIV>
... blah ... the actual document.
</DIV>
I'd like to get:
Additional Information
As permitted by house rules, this section is ... There's nested text here ... blah ... the actual document.
I know about using findall('//a') and checking the attrib hash for a 'name' key, but that just gets me the <a name="blah"></a> tag elements.
Ideally, I'd like to be able to define a recursive get_all_nodes_in_between() function that would work like this:
anchors = html.findall('//a')
for i, anchor in enumerate(anchors):
if anchor.attrib.has_key('name'):
all_elements = get_all_nodes_in_between(anchor, anchor[(i+1)]
How can this be done?
You can do this in BeautifulSoup by the checking for the DIV tag and grabbing all data within there:
Edited code from comments:
from BeautifulSoup import BeautifulSoup
import re
html ='''
<A name='G27866101'>
<DIV align="left" style="margin-left: 0%; margin-right: 0%; font-size: 10pt; font-family: Arial, Helvetica; color: #000000; background: transparent">
<B><FONT style="font-family: 'Times New Roman', Times">About This Section</FONT></B>
</DIV>
</A>
<DIV align="left" style="margin-left: 0%; margin-right: 0%; text-indent: 3%; font-size: 10pt; font-family: 'Times New Roman', Times; color: #000000; background: transparent">
This section is part of a registration that we filed with the proper authorities ... blah ... for more information.
</DIV>
<A name='G27866102'>
'''
soup = BeautifulSoup(html)
for item in soup.findAll('div'):
print ''.join(item.findAll(text=True))
outputs:
About This Section
This section is part of a registration that we filed with the proper authorities ... blah ... for more information.