I have an email template which has the following code:
<html>
<head></head>
<body style="font-family:Verdana">
<h1 style="font-size:36px;text-align:center">Welcome!</h1>
<div style="text-align:center;margin:50px">
<span style="font-size:18px">We are happy to see You joined! Please press the button below to confirm Your account.</span>
</div>
<div style="text-align:center">
<a style="background-color:#3a86e0;border-radius:4px;color:#fff;font-size:18px;padding:8px 32px 8px 32px;text-decoration:none;display:inline-block" href="{parameter}">Confirm email address</a>
</div>
<div style="text-align:center;margin:50px">
<span style="font-size:12px">
<b>You received this message because Your email address was used to create an account in our project. Ignore this in case of a mistake.</b>
</span>
</div>
</body>
</html>
And when it comes to rendering in a web browser it looks just fine, but I open such email in the Outlook app or built-in Windows Mail app the corner radius property of the <a> tag is being ignored, and the link is drawn with the square corners.
Please see the images below to see the difference.
This is how its rendered in the apps:
This is how its rendered on the email websites:
I searched the web for similar issues but had no luck. Could you help me please, why the same HTML is being rendered differently and how I can fix this? Thanks.
Some email providers do not support padding and border-radius.
You can try generating a bulletproof button here that will use workarounds for those unsupported properties
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 have an email template which works with other email client but, Outlook shows it as distorted (inner div). Here i have specified width of my inner div 920px but in not take effect in outlook. I have either tried this solution but not works
This is my html email template
<html>
<body>
<div style="width:950;margin:0px auto;">
<img style="width:100%;" src="cid:header">
<div style="background-color: #f3f3f3;width: 920px;padding: 15px 15px 20px 15px;margin: 0px;font-family: arial,sans-serif;font-size: 12.8px;box-sizing: border-box;color:#000;white-space:pre-line;" >
Dear xyz
<br><br>
My mail body
<!-- Body might contain table -->
<br><br>
support<br>
</div>
</div>
</body>
</html>
I have refer previous question and emailology but no solution found for div.
Please help me.
You should not use standard front-end development solutions for emails. It's unfortunate, but using table-based layouts is still the best way to handle it. Also, as a general rule of thumb, email widths should fall between 600-800px at the max.
I want to extract result of checking code. Website display in that code. I marked it in source code.
<div id="ember332" class="ember-view backArrowContainer">
<div id="purchaseMeta">
<h2 class="flowStatus"> UŻYJ KODU PREPAID </h2>
<div class="gamertag">
<div class="title">
<script id="metamorph-2-start" type="text/x-placeholder">
***CODE STATUS WHICH I WANT TO EXTRACT***
<script id="metamorph-2-end" type="text/x-placeholder">
</div>
<div class="price"> Kod prepaid </div>
</div>
It is avaible when i go to this site: https://account.xbox.com/pl-PL/PaymentAndBilling/RedeemCode?token=W4HV8-6D6X3-3JVDJ-8PPG9-Q6BVR
I want to extract only CODE STATUS displayed when website will go to this adres. I think it can be avaible when i can use in HTML but i don't know how. Please help me with extract this status.
You can't extract anything from the inside of an iframe. There cannot be any interaction from the parent to the iframe. There can, therefore, be interaction between the iframe and the parent, but since you are not the owner of the iframe's webpage, this is not your case.
It's a security issue. People could get scammed if this wasn't this way. For example, designing a full-page iframe with a bank webpage and retrieving everything user types... Or designing a 1x1px iframe with a facebook page to see if your user is logged on fb and check all his/her personal information.
You can use a server-side language, such us PHP and get the HTML of that webpage using file_get_contents()
I am using anchor tag for linking my welcome page to my main page. It is working on chrome but not in mozilla.
Code:
<div id="wel1"><h1>WELCOME TO ASSESMENT ENGINE</h1></div>
<div id="wel2">
<div id="wel3"><p id="wel4">Instruction:</p><br>
<p id="lang">Total number of questions : 5.<br><br>
Time alloted : 3 minutes.<br><br>
Each question carry 10 mark, no negative marks.</p>
</div>
<div id="wel5">
<p id="wel4">
Note:</p><br>
<p >
<ul>
<li><p>Click the 'Submit Test' button given in the bottom of this page to Submit your answers.</p></li>
<li><p>Test will be submitted automatically if the time expired.</p></li>
<li><p>Don't refresh the page.</p></li>
</ul>
</p>
</div>
<button id="bu">START THE TEST</buttton>
</div>
In this image START THE TEST button working on chrome perfectly but not on mozilla.
You have invalid close tag </buttton>
Try:-
<button id="bu">START THE TEST</button>
Demo
Although the code works if the end tag spelling error is corrected, it is illogical and forbidden in HTML5 to nest interactive elements: the a element must not have interactive content like a button element. A click on such an element could activate the outer element, or the inner element, or both. Although this might not matter in this specific case, it’s still not recommended.
Instead, you can use an image of a button an make it a link:
<img src="start.png" alt="START THE TEST" border="0">
or use a minimal form (submitting a form is different from following a link, but the differences often don’t matter, or could be an improvement):
<form action="as.html"><button type="submit">START THE TEST</button></form>
Spell mistake in the Closing button tag, Use </button> instead </buttton>
I'm sending an automatic html email from my website. In my email I set some text to red color and the font to a certain font type. When I view the html email from yahoo mail, The red color is applied, but the font is not applied. Why is it?
Also, when I try to view the html source code of the yahoo mail web page, I cannot find my html email content on this html source code. why is it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<h2 style="color: #CC0000; text-align: center;">
Welcome to the Dave's Photo Album</h2>
<p>
Hi <%UserName%>,</p>
<p>
Thanks for registering. Here is your new user name and password:</p>
<p>
User Name: <%UserName%>
</p>
<p>
Password: <%Password%>
</p>
<p>
Enjoy!
</p>
You can use css inline only, and from my experience you need to do it with tables, since not all email services (none maybe) understand divs that well, I also recommend to stay within 600 px wide for the template, since its usually displayed in "panes" like yahoo mail, gmail, outlook etc. there's a lot of material you can check over at this page:
http://www.campaignmonitor.com/css/
there's no html, body or title declaration, just start with <table></table> like if was your body.
outlook 2007 will probably be the one with the most restraints.
good luck
In css, you can use font or font-family to change the font. I don't see anything that would actually change the font in your code there!
http://www.w3schools.com/css/css_font.asp
Don't send email in HTML. It is much more likely to be flagged as spam if you do.