I create a template on Sendgrid as a standard email, I tested on Gmail in different devices, it works fine, until I try Outlook, it looks like all of my css, images are gone. So what is the root cause?
Here is my html code:
<div style="font-family: 'Poppins', Helvetica, sans-serif;">
<div style="background-color: black; position: relative; padding-top: 30px; padding-bottom: 30px;">
<img src="image.png"
style="height: auto; width: 135px; position: absolute; top: 0; bottom: 0; margin: auto; padding-left: 16px;">
</div>
<div style="padding: 10px; text-align: center;">
<img src="image.png"
style="width: 40px; height: auto; margin-bottom: 16px;">
<p style="margin: 0; padding: 0; color: #00cc66; font-size: 24px; font-weight: bold;">Email Confirmation</p>
</div>
<div>
<div style="padding: 16px; color: black;">
<p>Hi -Name-,</p>
<p>Welcome.</p>
<p>Please confirm your email-address by clicking the button below.</p>
</div>
<div style="text-align: center; padding-bottom: 15px;">
<a href="-EmailConfirmUrl-" target="_blank">
<button style="border: none; cursor: pointer; background: #2840ff;
color: white; width: 200px; height: 48px; text-transform: uppercase;
font-size: 0.8rem; outline-style: none;
background-image: linear-gradient(to top right, #2840ff, #22eaff); box-shadow: 0px 1px 15px -2px lightgrey;">
Verify Email Now
</button>
</a>
</div>
<div style="text-align: center; background: #2840ff; color: white;
background-image: linear-gradient(to top right, #2840ff, #22eaff); bottom: 0; padding: 4rem 0;">
<img src="image.png"
style="height: 20px; width: 160px;">
<p style="color: #ced4da; font-weight: 300;">
Copyright © 2018. All rights reserved.
</p>
</div>
</div>
</div>
You can't use standard css3 in your emails, if it has to work in outlook.
Outlook is using the HTML rendering engine of Microsoft Word (sad, but true).
There are a lot of amazing tips and tricks on how to make email work in (all) clients.
Here are just a view links:
https://litmus.com/resources
https://mailchimp.com/resources/?_ga=2.98108630.81642254.1536052613-1816129050.1536052613
Related
I'm new to html and css, but I'm trying to teach myself how to make a decent looking website. I've gotten to the footer portion of the website and I thought I created well since it looked as I wanted, but when I zoomed into the page, the elements in the footer all began overlapping with one another. Could someone help me out by showing me how to fix this issue. Any help is appreciated.
My current footer:
.footer {
background: #323132;
text-transform: uppercase;
width: 100%;
height: 350px;
color: white;
}
.footer a {
text-decoration: none;
color: #a2a4a7;
font-family: Arial,sans-serif;
font-size: 14px;
}
.vertical-right-1 {
border-right: 2px solid black;
height: 200px;
position: absolute;
margin: 15px 0;
left: 20%;
box-shadow: 0.2px 0.2px;
}
.vertical-right-2 {
border-right: 2px solid black;
height: 200px;
position: absolute;
margin: 15px 0;
left: 45%;
box-shadow: 0.2px 0.2px;
}
.vertical-right-3 {
border-right: 2px solid black;
height: 200px;
position: absolute;
margin: 15px 0;
left: 70%;
box-shadow: 0.2px 0.2px;
}
<div class="footer">
<div style="float: left; margin: 0 auto; padding: 10px 0 0 40px;">
<p><strong>Find a Store</strong></p>
<p><strong>Sign Up For Email</strong></p>
<p><strong>Become A Member</strong></p>
<p><strong>Site Feedback</strong></p>
</div>
<div class="vertical-right-1">
</div>
<div style="float:right; margin: 0 auto; width: 300px;">
<p style="font-family: 'Cabin Condensed', sans-serif;font-size: 20px;">Need To Talk?</p>
<p>Order Status</p>
<p>Shipping and Delivery</p>
<p>Returns</p>
<p>Payment Options</p>
<p>Contact Us</p>
</div>
<div class="vertical-right-2">
</div>
<div style="float:right; margin: 0 auto; width: 330px;">
<p style="font-family: 'Cabin Condensed', sans-serif;font-size: 20px;"><strong>Sports</strong></p>
<p>Soccer</p>
<p>Basketball</p>
<p>NFL</p>
<p>Tennis</p>
</div>
<div class="vertical-right-3">
</div>
<div style="margin:0 auto; width:630px; padding:4px 0 0 0;">
<strong>
<p style="font-family: 'Cabin Condensed', sans-serif; font-size: 20px;">About The League</p>
</strong>
<p>News</p>
<p>Careers</p>
<p>Investors</p>
<p>Sustainability</p>
</div>
<div style="margin: 30px; color: white;"><br>
<hr>
</hr>
</div>
<a href="#"><i class="fa fa-facebook"
style="padding: 25px;font-size: 30px; width: 80px; text-align: center; text-decoration: none; border-radius: 50%;"></i></a>
<!-- <a href="#"><i class="fa fa-twitter"
style="padding: 2px;font-size: 30px; width: 30px; text-align: center; text-decoration: none; border-radius: 50%;"></i></a>
<a href="#"><i class="fa fa-instagram"
style="padding: 2px;font-size: 30px; width: 30px; text-align: center; text-decoration: none; border-radius: 50%;"></i></a> -->
</div>
As you can see, the lines are all overlapped, and it looks just wrong. If you view it in full screen mode it looks as it should.
Hope someone can lend a hand!
You're going to want to set up some breakpoints which will allow you to alter CSS for different screen sizes.
Also, I wouldn't use absolute and left to position elements on a page, unless in particular circumstances. What you want to do instead is use grid or flexbox, it will make life much easier in the future.
I have this button that redirects correctly on the browser; however, whenever I put it on my email in Gmail, it doesn't redirect
<DIV style="TEXT-ALIGN: center">
<A style="FONT-SIZE: 14px;
FONT-FAMILY: Arial;
WIDTH: 100%;
COLOR: #fff;
TEXT-ALIGN: center;
DISPLAY: inline-block;
LINE-HEIGHT: 50px;
BACKGROUND-COLOR: #0070ba;
border-radius: 50px" href="[websitelinkhere}">
<STRONG>vérifiez votre compte </STRONG>
</A>
</DIV>
try now. it need to be html verified.
check every time in: https://validator.w3.org
<div style="text-align: center">
<a style="font-size: 14px;
font-family: Arial;
width: 100%;
color: #fff;
text-align: center;
display: inline-block;
line-height: 50px;
background-color: #0070ba;
border-radius: 50px" href="[websitelinkhere]">
<strong>vérifiez votre compte </strong>
</a>
</div>
I have my company name on the left and my email on the right. I have the email set up like this:
<div style="color: white; float: right; padding-right: 10px; text-align:right">
<p style="font-size: 16px;">E-mail</p>
<p style="font-size: 20px; text-decordation: none;">newtrendphotography23#gmail.com</p>
</div>
As I am unable to upload any photos, this might be hard to explain. There is a verticle gap (like the height of the company name) between the word "email" and my actual email.
Here is the entire (relevant) HTML:
HTML:
<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 80px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<div style="color: white; float: right; padding-right: 10px; text-align:right">
<p style="font-size: 16px;">E-mail</p>
<p style="font-size: 20px; text-decordation: none;">newtrendphotography23#gmail.com</p>
</div>
</div>
</div>
This gap is because of margin and padding p element.
Use :
div p {
margin: 0;
padding: 0;
}
If you want ,remove gap between email and my actual email only.
So use:
div p {
margin: 0;
padding: 0;
}
div p:first-child {
margin-top: 20px;
}
Demo
I've been stumped at this for the past 2 hours and I am looking for some help. Basically this layout works fine in Firefox (The text spacing, the elements and contact form all look good). In IE & Chrome the top margin of everything seems almost double. Here is the code:
HTML
<div id="contentBody">
<br>Company</br>
<p>Address 1</p>
<p>Address 2</p>
<br>Tel</br>
<br>Fax</br>
<br>E-Mail</br>
<div id="ekontakt">
<p>
<p><b>Title</b></p> <p>Name</p> <p>E-Mail</p>
<p><b>Title</b></p> <p>Name</p> <p>E-Mail</p>
<p><b>Title</b></p> <p>E-Mail</p>
</div>
<div id="map-canvas">
<a href="google maps link" target="blank" />
<img src="images/map.jpg" />
</a>
</div>
<form action="mailer.php" method="post" class="contactform">
<!-- Bunch of Labels removed, these work fine -->
</form>
</div>
CSS
#ekontakt
{
font-size:12px;
margin:2em auto -32em 0em;
}
#map-canvas {
background-image: url(../images/map.jpg);
width: 300px;
height: 200px;
margin:33.5em 0em -50em 0em;
line-height: 0px;
}
.contactform {
margin: -5em -7em 0em 30em;
max-width: 500px;
background: #555;
padding: 20px 20px 20px 20px;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #D3D3D3;
text-shadow: 1px 1px 1px #444;
border: 2px solid;
border-radius: 0px;
border-color: #FFFFFF;
opacity: 0.8;
filter: alpha(opacity=80); /* For IE8 and earlier */
overflow: hidden;
position: relative;
}
Thanks for the help in advance!
Using Windows Live E-mail, I make a signature and save the file which gives me the following code.
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=utf-8">
<HTML><HEAD></HEAD>
<BODY dir=ltr>
<DIV dir=ltr>
<DIV style="FONT-FAMILY: 'Arial'; COLOR: #000000; FONT-SIZE: 10pt">
<DIV> </DIV>
<DIV style="FONT-FAMILY: 'Arial'; COLOR: #000000; FONT-SIZE: 10pt">
<DIV dir=ltr>
<DIV style="FONT-FAMILY: 'Arial'; COLOR: #000000; FONT-SIZE: 10pt">
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV>
<HR>
</DIV>
<DIV><IMG
style="BACKGROUND-IMAGE: none; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MARGIN: 5px 20px 0px 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: inline; FLOAT: left; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px"
title=pufs_mail_logo border=0 alt=pufs_mail_logo align=left
src="G:\Profile\PUFS\E-Mail\pufs_mail_logo.png" width=120 height=100></DIV>
<DIV><STRONG><EM>for Pak United Food Services Ltd.,</EM></STRONG></DIV>
<DIV>Tel : 0092 55 3885502</DIV>
<DIV>Fax : 0092 55 3885503</DIV>
<DIV>Web Site : www.pufs.org/</DIV>
<DIV>E-Mail : info#pufs.org</DIV>
<DIV>Address : Al Shafi Market, G.T Road</DIV>
<DIV>Gujranwala, Ghakhhar, 52200 – Pakistan</DIV>
<HR>
</DIV></DIV></DIV></DIV></DIV></BODY></HTML>
It works fine in IE9 and GG but in FF the image does not display and the alt text is shown instead. Please note that I have changed some code. The before code given was:
DIV><IMG
style="BACKGROUND-IMAGE: none; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MARGIN: 0px 20px 0px 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: inline; FLOAT: left; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px"
title=pufs_mail_logo border=0 alt=pufs_mail_logo align=left
src="cid:C7912B932AF345A9A29DC8E6F6BCAE8B#JawadPC" width=120 height=100></DIV>
Which I changed to
<DIV><IMG
style="BACKGROUND-IMAGE: none; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MARGIN: 5px 20px 0px 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: inline; FLOAT: left; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px"
title=pufs_mail_logo border=0 alt=pufs_mail_logo align=left
src="G:\Profile\PUFS\E-Mail\pufs_mail_logo.png" width=120 height=100></DIV>
Basically just changing the path to the image file.
I could use an absllute url, but that has some seceurity issues. How do I get this simple file to dsiplay the image. (DOCTYPE?)
The signature file should reside on a web server. You should be pointing to it using a fully-qualified URI: http://....
BTW - most web-based mail clients will rip off the HEAD and everything up to the BODY. Just use the HTML.