I've created a responsive HTML email which works fine across many different platforms except when viewed on iPhone.
It seems that iOS is recognising a date + time and applying a blue colour/underline to the content. I've researched this issue for the past couple hours and am at a dead end.
I've tried turning format detection off for phone numbers:
<meta name="format-detection" content="telephone=no">
I've tried including date and address in this too:
<meta name="format-detection" content="telephone=no, date=no, address=no">
I've tried adding !important to the styles on the element with still no luck:
<h4 style="font-size: 16px;color: #FFFFFF !important; text-decoration:none !important;font-family: Arial;font-weight: bold;padding: 0;margin: 0;text-align: left;line-height: 1.3;word-break: normal;" class="appleLinksWhite">
Thursday 20th November
</h4>
<p style="color: #FFFFFF !important; text-decoration:none !important;margin: 0;margin-bottom: 0;font-family: Arial;font-weight: normal;padding: 0;text-align: left;line-height: 19px;font-size: 14px !important;" class="appleLinksWhite">
10:45am until 12:30pm,<br>The Feast, Suffolk Food Hall, Ipswich
</p>
I've tried adding a class to the elements .appleLinksWhite as recommended here which still did not do the trick.
I have also tried wrapping the inner contents in a <span> with the colour and text-decoration set and this still didn't work.
I'm at a loss for other things to try. How can I disable this behaviour?
Edit* It's worth noting that the issue is only with iPhone 4/5. iPhone 6/Plus are fine.
This will eliminate the blue+underline styling (tested on iPhone 5, iOS 8.3):
a[href^="x-apple-data-detectors"] {
color: inherit !important;
text-decoration: inherit !important;
}
I managed to get this working by tricking the date detection algorithm into thinking it's not dealing with a date by inserting a zero width character in between my date/time strings e.g:
<h4 style="font-size: 16px;color: #FFFFFF !important; text-decoration:none !important;font-family: Arial;font-weight: bold;padding: 0;margin: 0;text-align: left;line-height: 1.3;word-break: normal;" class="appleLinksWhite">
Thursday 20th November
</h4>
<p style="color: #FFFFFF !important; text-decoration:none !important;margin: 0;margin-bottom: 0;font-family: Arial;font-weight: normal;padding: 0;text-align: left;line-height: 19px;font-size: 14px !important;" class="appleLinksWhite">
10:45am until 12:30pm,<br>The Feast, Suffolk Food Hall, Ipswich
</p>
Related
For some reason, the ending of my email gets messed up any time there's a list (or div, or blockquote) above it. If I remove the list, then the problem magically goes away. Everything is closed properly, everything is aligned properly, etc. So I'm at a loss - what am I doing wrong? Template below:
<div style="max-width: 600px !important; padding: 20px; background-color: #FFFFFF"><p style="color: #191C22;font-family: Arial, sans-serif;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-size: 16px;line-height: 150%;text-align: left; width: 100%;">Hi! <br>
<br>
Thanks for starting your application!<br><br>
Give us a call at our number or you can email us with questions.
<br><br>
Thanks for your business!<br>
<br>
<ul></ul>
Best,<br>
Magenta & Co
</p>
</div>
Most of the issues have been cleared up but one of my h1's will turn black in dark mode on Outlook 360 and I'm not quite sure as to why.
<h1 mc:edit="header-title"
color="#ffffff"
mc:label="header-title"
class="header-title darkmodecolor"
style="margin: 0;padding: 0;box-sizing: border-box;font-family: Arial, Helvetica, sans-serif;max-width: 100%;color: white !important;font-weight: 700;font-size: 28px;line-height: 140% !important;">
<span
class="header-title darkmodecolor"
style="color: white !important;">
text is here
</span>
</h1>
I have tried using the color scheme media query but nothing is affecting it.
I have following HTML markup as an input to be pasted onto IE browser in place of selected content on the browser:
<span id='fs_892_3006_0' class='ParaMarked' FactType='NonNumeric' onclick='OnSpanClick("fs_892_3006_0", event)' IsFactMarked='true'>
<fact id='892_3006_0' keyword=''>
<P style="margin: 0pt 0pt 10pt; line-height: 115%; font-size: 11pt;">
<SPAN style="font-family: Calibri; font-size: 11pt;">THIS IS A TEST CONTENT 1</SPAN>
</P>
</fact>
</span>
However, when the HTML is rendered, IE adds extra tags surrounding this HTML as shown below:
<p style="margin: 0pt 0pt 10pt; line-height: 115%; font-size: 11pt;">
<span style="font-family: Calibri; font-size: 11pt;">
<span id="fs_892_3006_0" class="ParaMarked" onclick='OnSpanClick("fs_892_3006_0", event)' IsFactMarked="true" FactType="NonNumeric">
<fact id="892_3006_0" keyword="">
</p><p style="margin: 0pt 0pt 10pt; line-height: 115%; font-size: 11pt;"><span style="font-family: Calibri; font-size: 11pt;">THIS IS A TEST CONTENT 1</span></p></fact></span></span>
I have tried below techniques to paste HTML onto browser, but gives same result:
Note: "markedText" is the javascript variable which contains the HTML input as mentioned above
1. pasteHTML(markedText) : http://msdn.microsoft.com/en-us/library/ie/ms536656(v=vs.85).aspx
2. Rangy library :
var sel = rangy.getSelection();
var range = sel.getRangeAt(0);
range.deleteContents();
var node = range.createContextualFragment(markedText);
range.insertNode(node);
Any pointers on this would be appreciated.
Thanks.
A p inside a span will probably not work, as it's a block level element inside an inline element.
Some browsers will "fix" the issue by wrapping the inline elements in a block level element (default a 'p') and continue with the rest of the markup.
I am making a HTML email and testing using Litmus, however Lotus Notes 8.5 does not appear to be displaying any link styles. I am using pretty old school methods to make sure it works in older mail clients, but nothing seems to work. The links are getting styled in every other client, including Lotus Notes 7 & 8.
Here is the code:
<font face="Arial" size="2" color="#00b4da" style="font-size: 16px; line-height: 22px; color: #00b4da; text-decoration: none;">
<a href="http://www.link.com/" style="font-size: 16px; line-height: 22px; color: #00b4da; text-decoration: none;">
www.link.com
</a>
</font>
It could just be a bug with the app, however, it could also be me. I am not really sure what my other options are.
Put the <font> tag inside the <a> tag instead.
<a href="http://www.link.com/" style="font-size: 16px; line-height: 22px; color: #00b4da; text-decoration: none;">
<font face="Arial" size="2" color="#00b4da" style="font-size: 16px; line-height: 22px; color: #00b4da; text-decoration: none;">
www.link.com
</font>
</a>
Since <font> tags are inline elements, you can either nest them or wrap them around multiple blocks of text without affecting layout.
in the inline style, try adding "color: #00b4da; color: #00b4da !important;"
I seem to remember coming across something similar in hotmail and needing to do this but that was a while ago. Hope that helps.
I seem to be having problems with declaring doctypes (possibly) in IE and FireFox.
This is the code that I'm having the issues seen in the screenshots with:
<div id="contact" style="position:absolute; left:81px; top:2440px; width:639px; ">
<span class="contact_header">Getting in touch is easy
</div>
<div style="position:absolute; left:80px; top:2500px; width:320px; ">
<br><span class="contact_title">email me:</span></br>
<br><span class="contact_links"><a class="white" href="mailto:hello#superallan.com?subject=Hello superallan!&body= "> hello#superallan.com</a></span></br>
<br><span class="contact_title">tweet me:</span></br>
<br><span class="contact_links"><a class="white" target="_blank" href="http://twitter.com/#!/superallan"> #superallan</a></span></br>
<br><span class="contact_title">phone me:</span></br>
<br><span class="contact_links"> +44 (0) 7540 308 682</span></br>
</div>
<div style="position:absolute; left:400px; top:2500px; width:320px; ">
<br><span class="contact_title">write to me:</span></br>
<br><span class="contact_address"> 11 abbeyview</span></br>
<br><span class="contact_address"> crossford</span></br>
<br><span class="contact_address"> fife</span></br>
<br><span class="contact_address"> scotland</span></br>
<br><span class="contact_address"> united kingdom</span></br>
</div>
This is my current doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html lang=en-us>
This is the CSS for the section:
.contact_title {
font-family:"FairfieldLTStd55Medium", Georgia, serif;
font-size: 18pt;
line-height: 22pt;
color: #FFF;
}
.contact_links {
font-family:"FairfieldLTStd56MediumItalic", Georgia, serif;
font-size: 18pt;
line-height: 22pt;
color: #FFF;
}
.contact_address {
font-family:"FairfieldLTStd56MediumItalic", Georgia, serif;
font-size: 18pt;
line-height: 22pt;
color: #FFF;
}
This is how it renders in Firefox and IE.
http://i.stack.imgur.com/l8h4q.jpg
When I change the doctype to strict it still looks fine in FF but IE makes the line-heights even greater.
Any ideas? Or possibly - how to fix it just for IE as it works fine in eveything else...
I note that you're using pt measurements for your font-size and line-height styles.
Note that pt is intended for use with printed pages, and is not rendered accurately on the screen. If you want a pixel-perfect accurate font size on the screen, use px instead. (You can also use em or % for relative measurements, but it looks like you're intending to use a fixed size measurement, so px is the one).
For more info, see this page: http://css-tricks.com/css-font-size/
To quote from the relevant section of the linked page:
Just like how pixels are dead-accurate on monitors for font-sizing, point sizes are dead-accurate on paper. For the best cross-browser and cross-platform results while printing pages, set up a print stylesheet and size all fonts with point sizes.
For good measure, the reason we don't use point sizes for screen display (other than it being absurd), is that the cross-browser results are drastically different.
...which does sound like exactly the symptoms you're seeing.
Hope that helps.