I have an html page which has a following text:
<font face="Tahoma, Geneva, sans-serif">Please contact our sales person by email: salesperson#company.com or by phone: 888-888-8888</font>
It does show well in every browser except Safari on iOS. The number is there, because you can click on it, and the iOS device prompts you to call this number. It is just not visible.
One of the solutions I found is to add the following line of code to the head of the page:
<meta name="format-detection" content="telephone=no" />
The number becomes visible, but Safari does not recognize it as a phone number anymore, so the user can not do a tap-to-call.
The other solution is to make the phone number a link:
888-888-8888
But in that case IE actually tries to go to the "tel:888-888-8888" link, so it is not the best solution at all.
So the question is: Is it possible to keep the phone number as text, but make it visible and recognizable as a phone number in Safari on iOS devices?
Additional info:
Font is white because it is specified in the CSS file for links. I do not want to change it, because this will affect all other links, which are suppose to be white. It is only the safari on iOS which makes a hyperlink from the phone number.
Try to create separate class of links which is the same as original and make every link in your code the link of that class. Leave the phone number as a plain text. It should work.
This solution worked for me
a[href^=tel] {
color: inherit;
text-decoration: none;
}
I found it here. https://css-tricks.com/forums/topic/phone-numbers-not-displaying-in-safari/
It seems it is a strange css issue with the way safari deals with the numbers.
The font tag is obsolete and shouldn't be used. It was deprecated in HTML 4.01 and is completely unsupported in HTML 5.
If you apply your text styling via CSS, it should show up in mobile Safari.
Instead of:
<font face="Tahoma, Geneva, sans-serif">Please contact our sales person by email: salesperson#company.com or by phone: 888-888-8888</font>
Try:
<span style="font-family: Tahoma, Geneva, sans-serif;">
Please contact our sales person by email: salesperson#company.com or by phone: 888-888-8888
</span>
Ideally, you'd use style sheets to specify the page's presentation, but if you just want a drop-in solution, that should work. Write valid html, though, and you won't run into this kind of problem.
It seems iOS will turn the phone number into an anchor even if it's not in an anchor. Give it a class or id and then style your anchor.
.contact { }
.contact a { text-decoration: none; color: #000000; }
Related
I have the following html:
<div class="awpcp-subtitle">Contact Information
</div>
Contact $adcontact_name
<a href="tel:$adcontactphone">
<div class="phone">$adcontactphone
</div>
</a>
<div class="location">
<Location: </label> London, UK</div>
This makes a button link to dialing screen on mobile, with the number displayed on screen.
It works fine in Android, on Chrome/ Firefox, but as soon as I try it on an Apple phone on Safari, instead of just linking to dialing screen with the number displayed, it asks if I want to dial this:
<br><label>,hone<label>07945xxxx
When I press yes, it says it can't dial:
<br><label>,hone<label>07945xxxx
For obvious reasons in that it can't dial a code.
This must be a Safari iPhone/Mac issue, and what on earth does 'hone' mean anyway?
So I tried this html after the tag in my header.php, to make my site browser compatible.
<script
src="css_browser_selector.js"
type="text/javascript"></script>
This didn't work for the phone issue (there are others but let's stick to this for now.)
So how do I get apple iPhone, using Safari browser, to perform the same simple task as Firefox, Chrome, Android etc.
Perhaps there is a way to hide
<br><label.....
Like:
.div class ["<BR><label..."]
{display: none}
? It's behaving like published text so treat it as such?
I came across this but not sure what to do with it or if it is the right code? I'm getting the same issue with Google maps
"<"followedby"!"<br/><label>Phone:
</label>""followedby">"
"<"followedby"!"<br/>.
<label>Location:
</label>""followedby">"
But
$adcontactphone
Represents generic phone as well as specific phone number -including label tags
Based on the link provided in the comments I can deduce that $adcontactphone is being assigned the following value:
<br/><label>Phone:</label> 7576XXXXXX
You can see that string contains valid html tags, but then you are using $adcontactphone inside an href attribute:
<a href="tel:$adcontactphone">
...
</a>
This results in the following html after interpolating the variable:
<a href="tel:<br/><label>Phone:</label> 7576XXXXXX">
...
</a>
Many browsers will not consider this as a usable value for href. Some browsers may be made to filter out tags inside the attribute and others may not. This is not a browser compatibility issue because each browser is free to handle this invalid attribute in its own way.
If you fix $adcontactphone to contain just the phone number you will find that the link will start working in most browsers. The result you are aiming for would be this:
<a href="tel:7576XXXXXX">
...
</a>
There are also other invalid html problems that should be fixed to be sure that this section of your page is consistent across all browsers. For example:
<div class="location">
<Location: </label> London, UK</div>
You have an unmatched < here, also Location is not a supported html tag so some browsers may not like that.
Maybe it should look like this?
<div class="location">
<label>Location:</label> London, UK
</div>
Similar to this question, How do I remove the blue styling of telephone numbers on iPhone/iOS?
I tried the suggestion using following code but it does not work:
[href^="tel"]{
color:inherit;
}
My problem is I am copying a page from my website into an email (weekly newsletter), and gmail is converting it to a blue hyperlink. Even before adding a[href^="tel"], it did not show up as blue on my website. I'm thinking there is no fix since it is happening via google?
if this is happening on gmail app, you can use an anchor tag and give it a color without the href
<a style="color:#000001; text-decoration:none;">iOS Fix</a>
if this is happening on the generic email clients for iOS you can use a class in the header and assign the class to the td
<style>
.appleLinkFix a{color:#000000; text-decoration:none;}
</style>
next you can add the class to the td which iOS will create the link by itself.
<td class="appleLinkFix">48 Pirrama Rd, Pyrmont NSW 2009</td>
Hope that helps answer your question.
Add these styles
color: inherit;
text-decoration: none;
This is also very easy to Google.
This is the code I'm using.
<pre style="cursor: default !important; pointer-events: none !important; font:700 21px Arial; color:#fff!important; margin:12px; text-decoration: none !important;">
info#royalsingapore.com | +65 6417 3059
</pre>
It is rendering as link when sent as an email newsletter from Madmimi.
I want it to be plain text. How to disable render as a link?
I could be wrong, but i believe the fact that is it rendering as a link is up to the website that the email is being viewed on. I bet that the website has a function running on the body of the message that turns anything that looks like a link into an anchored link.
Email systems such as google and specially apple on mobile recognize email addresses and phone numbers and make them clickable. you need to wrap it around in a anchor tag and give it a value of 000001 for example to make it black.
I'm working on a email blast that displays a number to a federal company dealing with health.
Here's what my code in the section looks like:
<p style="margin: 1em 3em 0em 0em;color:color:#585A63;">
Visit a website or call <span style="color:color:#585A63; display:block; text-decoration:none;">1-800-123-4567.</span>
</p>
This code displays as it should on all browsers and email services, but when I view it in iPhone 4S, 5, and iPad, all that shows up is:
Visit a website or call
The number is magically gone. I've tried replacing the number with HTML entities as well, but no luck. However if I type the number in twice, it will display the full first number and half of the second. Any ideas about what's going on?
Try adding <meta name="format-detection" content="telephone=no" /> in your head tag.
Edit: Okay, so it's showing up for me: http://jsfiddle.net/XkssQ/show
My guess is that the container the phone number is in is too small, causing the new line to be truncated.
I know that when i come to HTML email i have to use the Table Layouts. This is what i have done here Unfortunately when i make some tests with this online tool to my Hotmail and gmail, the layout is not exactly the same. In the email the difference from my HTML code is that it does not get the same H2 font style and family in the text <h2>"Responda correctamente a las preguntas y gane un viaje a Roma!"</h2> and the second image is separated from the one on the top and the one on the bottom. What's the best solution to figure it out the issue? How can i achieve the same layout?
Thanks for your time
Do not rely on external (<link rel="stylesheet">) or embedded style sheets (those contained within the <style> tag above the <body> tag). This is the most important thing to avoid. Many email services cut everything above the body tag and disable external style sheets. That said you can include a few embedded CSS statements (such as link color) as long as you're ok with them not rendering in some email clients.
Taste this post: http://groundwire.org/labs/email-publishing/using-css-and-html-in-email-newsletters
Try to add style="display:block;" to all your img tags and instead of an h2 use a font tag with a style attribute:
<font style="color:#202020; font-family: 'Georgia',serif; font-size: 14px; line-height: 20px;">
<b>Some title</b>
</font>
<br>