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.
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>
I just have my number on my website with an image above it acting as a link so mobile users just click it and call me. I was checking my site through a few browsers and Microsoft Edge underlines the phone number and changes the color to blue to show that it is a hyperlink. It continues to do so even after declaring the text-decoration to none.
For the sake of not broadcasting my phone number on a site that gets a lot of traffic, I do not want to provide the link to my website. I can however show the piece of code with a fake number:
<div class="col-6"> <!-- NOTE: Phone -->
<img src="images/phone.png" alt="Phone" usemap="#phone">
<map name="phone" id="phone">
<area shape="circle" coords="64,64,64" href="tel:5555555555" alt="Phone">
</map>
<h3 style="text-align:center;text-decoration:none;">555.555.5555</h3>
</div>
I appreciate any and all feedback as I am relatively new and self taught, so please excuse any code that may seem to be set up oddly.
Ran into the same problem. It's not supported in Edge according to caniuse.com.
https://caniuse.com/#search=text-decoration
You can enable/disable phone number detection in IE all together using the following meta tag
<meta name="format-detection" content="telephone=no"/>
or you can disable it for individual elements by using the following attribute
x-ms-format-detection="none"
As for removing the style like you asked in your question, you sorta can't override it with text-decoration. Although what you can do is style the link after removing the faux underline placed there by the browser.
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; }
What do I have to do to get my images to show up on my webpage. I am trying to put the images in my html document. The box shows up but not the image. This the code <img scr="smile.jpg" width="120" height="90"/> I have not put the web page on the internet yet.
<HTML>
<HEAD>
<TITLE> Tay first Web page </TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center"> Why do I want to learn to code? </H1>
<P> I want to learn to code because it will help me develop the skills I need in web development and game development. My goal is to learn how to code in many different languages. It is amazing to me to be able to create something from scratch and making it into your vision.</P>
<H2 ALIGN="center"> Why is coding fun? </H2>
<P> Computer coding is <STRONG> wonderful.</STRONG> You get to make a web page with whatever info you want and add so many things to it to make it mind blowing.There are colours, images, flash, and you can even make a video game if you wanted too. The possibilities are endless and mind blowing.</P>
<H3 ALIGN="center"> How can coding be important in the real world? </H3>
<P> <EM>Technology</EM> is everywhere and is constantly changing. <MARK>Computers</MARK> are so intertwined in our lives. People view web pages all the time and are looking at code everyday. Being able to code can get you a job if you are efficient with different languages.
<P><STRONG>These are the best consoles ever!!!!</STRONG></P>
<UL>
<LI>N64</LI>
<LI>SEGA GENESIS</LI>
<LI>XBOX</LI>
<LI>XBOX 360</LI>
</UL>
<TABLE BORDER="1">
<TR><TD>First</TD></TR>
<TR><TD>Second</TD></TR>
<TR><TD>Third</TD></TR>
</TABLE>
<IMG SRC="smile.jpg" WIDTH="120" HEIGHT="90"/>
</BODY>
</HTML>
You have to spell src correctly (SouRCe). You have two of its letters reversed.
This would have been picked up if you had performed some basic automated QA by using a validator.
your img tag was wrong,it should be
<img src="smile.jpg" width="120" height="90"/>
Check the following:
Could your image possibly be in another folder than your your file?
Could there be other divs or elements on the page that might be "on top" of your image?
Could your layout place things "off-screen"?
Could there be code that sets something to visibility: none?
Could you have spelled the filename of the image wrong?
Are you absolutely certain you force refresh your browser window when trying to load again?
Please give us the entire code; preferably as a JS-fiddle.
If you're looking to find it on a Linux server, the file name is case-sensitive. If you set it up and tested it and found that it tests fine on a Windows system, you will perhaps not have noticed that smile.JPG and SMILE.jpg and Smile.jpg will all be treated as though they're the same thing as smile.jpg. On a Linux host, if you call for smile.jpg and it's been stored as smile.JPG (for example), you'll get the result you're observing.
Width and Height attributes should have units. You want them in pixels?
Try this:
<img src="smile.jpg" width="120px" height="90px"/>
Are there ways to resize an image to fit thew window the image is being viewed in WITHOUT javascript and limited CSS?
I ask because I have an email campaign that I send out that features a main image that I want as large as possible without scrolling. I have read ways to do this with javascript and jQuery but I do not see a way to do this that the majority of email clients will read and react to properly. Is this possible? And if so - How?
This is the correct way to do it for a html email:
<img alt="" src="" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
It will auto resize to match the width of the container element (which should always be a <td>).
Note that on some clients (Outlook '07, '10 & '13 in particular), the image will not exceed it's maximum dimensions. If you are working with a max-width fluid template this will not be an issue providing your image width matches the max width.
This is how you should be able to do it
/****this is the Css****/
.full {
width:100%;
height:auto;
}
/***end Css***/
<!--Now the html--!>
<section>
<img src="image/main.png" class="full">
</section>
Or you can go the simple way
*update
you can do it like this
<img src="image/main.png" style="width:100%; height:auto; border:none;" />
and if they have an option to put it as html to do it like that as it should render correctly like that
You need to be as archaic as possible to make HTML emails work across all clients.
Inline styles and HTML 4 code should do the trick. Be warned though - max-width and max-height works in most clients, but this does NOT include Outlook 2007/2010/2013/365 which could well be over half of your target audience. Width works in all clients - but NOT on div and p tags in Outlook 2007/2010/2013/365! Always use tables not divs to be certain it will work.
Basically, always assume something isn't going to work and design for the smallest possible margin for error - and ALWAYS use inline styling or it might well get stripped.
If in doubt consult the oracle, I always do :)
Source: https://www.campaignmonitor.com/css/b/
HOW TO MAKE AN IMAGE RESIZE ITSELF IN A GMAIL
First, here is the HTML code we will be working with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Image Resizer</title>
</head>
<body>
<!-- Point to your image by placing the path in the source (src) attribute. -->
<img src="http://yourImagePathHere.jpg" style="width:100%; background-repeat:no-repeat; background-size:100%;" />
</body>
</html>
NOTE: Notice the part that reads "http://yourImagePathHere.jpg". This is the path that points to the image you want resized in the GMail. Put the URL for your image here. In order to run this code
in a browser, you’ll need to have it saved as an HTML document. You can
accomplish this by copying and pasting the code above into a code editor or text
editor (such as Notepad on a PC or TextEdit on a MAC) and save it with the
extension “.html”.
If you are using TextEdit on a MAC, you will need to switch to plain text editing
before pasting the code. To do this, choose “Make Plain Text” from the “Format”
menu.
For this example, we will assume your file name is “image_resizer.html”. If you
need to change the image, you will need to edit the HTML document with a code
or text editor. To do this, right click the HTML document and choose “Open With”
and select a code editor or text editor. Then, swap out the image source path
(bolded in the example above), replacing it with the path that points to the
updated image. Then save, and your HTML file should ready to go and updated
to point to the new image.
If you are using TextEdit on a MAC, you will need to start a new document,
switch to plain text editing, paste the code again, and then change the path to the
image.
Step 1: Open image_resizer.html in a browser. To do this, double click it OR
right click it and select a browser from the “Open With” menu.
Step 2: Click anywhere on the webpage. You can click on the image itself or the
white space on the webpage. The idea here is to make sure that we will have
the pointer’s focus on the window to verify that the page is ready to be selected.
Step 3: Select All. Do this by using “Ctrl + A” on a PC … OR … “Command + A”
on a MAC. The page contents will be highlighted.
Step 4: Copy. Do this by using “Ctrl + C” on a PC … OR … “Command + C” on
a MAC. The page contents will be copied to the clipboard. (That just means that
the computer memorizes it).
Step 5: Now that the contents are copied to the clipboard (memorized by the
computer), open your Gmail and click the compose button. Place your curser in
the content area (click in the area where you type a message).
Step 6: Paste. Do this by using “Ctrl + V” on a PC … OR … “Command + V” on
a MAC.
Step 7. Finish typing your email message and send it.
I was dealing with really big images without any kind of a container. I fixed it by using max-width to ensure the image wouldn't be too big.
<img
src=""
width="100%"
style="max-width: 80vw; margin: 0; border: 0; padding: 0; display: block;"
/>
Using both width and max-width ensures the image will take the full available space, but not too much. I used 80vw and not 100 because people rarely read your emails in a fullscreen mode, usually more often using a viewer (Gmail), which usually uses a bit of the available space.