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.
Related
What is the simplest vertical spacer in Outlook (and supported everywhere else)?
I have two elements, one on top of the other, both with display:block. I would like to space them without wrapping either in a table. I want a spacer that I can reuse anywhere with only simple adjustments to its height. I need to be able to set it to specific pixel heights. I also need to be able to override the height with a media query to make it responsive.
<div>test1</div>
<!-- Something here with reliable/succinct height/spacing -->
<div>test2</div>
Part of the goal is to avoid splitting things up into table cells every time we need vertical gaps, since that tends to add other complexities even aside from code bloat (bad for email).
The simplest if it's next to the table edges is to add padding to the <td> element:
<td style="padding:20px 0;">
But within a table cell, the simplest is to use a <p> element with margin:
<p style="margin:20px 0;">
Remember to always specify margin top and bottom on the paragraph because there are defaults. I am assuming you already use a <p> so it's got content after this. (So, don't use <p> </p> like another post says - the height will vary across email clients. And some email clients remove all <style> blocks, such as Gmail IMAP.)
In the case that you do not use a block level element and you want something standalone (that would be odd), you could use a <div> and specify line-height and font-size:
<div style="font-size:30px;line-height:30px;"> </div>
For comparison, if we were to use a <p>, we'd have to write something like this, because <p>'s have a default margin that you have to reset, so is slightly more words than a <div>:
<p style="font-size:30px;line-height:30px;margin:0"> </p>
(Or margin:30px 0 0 0;font-size:0;line-height: 0; which may be arguably 'simpler')
In email development, you'll always want to use tables for cross-client consistence. Reset all base styles and use height/width for spacing.
<table style="margin: 0;padding: 0;border-spacing: 0;overflow: hidden;background-color: #ffffff;" cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody style="margin: 0;padding: 0;">
<tr style="font-family: Helvetica, sans-serif;font-size: 100%;margin: 0;padding: 0;">
<td style="font-size: 0;margin: 0;padding: 0;height: 24px;background-color: #ffffff"></td>
</tr>
</table>
For a application specific spacer you could use:
<p> </p>
Outlook is quite respectful of common css styling so you could simply use height attribute on any element or class I use the pre tag in this example:
<!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" />
<style>
pre {
height:40px;
}
</style>
</head>
<body>
<h1><%Header%></h1>
<%Body%>
<div>Line 1</div>
<pre> </pre>
<div>Line 2</div>
</body>
</html>
I would avoid using margin and padding as its very sporadic across different email clients.
But the most compatible way I've found to maintain spacing across all email clients is sadly still with tables.
I've found this consistent. I use a div with line-height:50px;. Changing line-height predictably/consistently changes the amount of spacing in MS Outlook 2016 on up and every other newer client. Contrary to #Nathan's answer, I do not see any inconsistencies by omiting font-size. I am using this in production, and we test in Litmus. I will update this answer if I find an issue. Please let me know if you find a problem.
<div style="line-height:50px;"> </div>
I would love to see more/better solutions to this question. My team and I need a goto solution to become the standard.
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
I am designing an HTML email for a company. I'm having a problem with the footer at the bottom. Currently, it looks like this:
I love it!
When it's resized a lot, it looks like this:
Wonderful! I DO want the footer to break onto 3 lines.
However, when I resize the window halfway, it looks like this:
What CSS code can I use to make the footer to either break ALL lines, or none? It needs to ALWAYS look like either this:
or this:
But NEVER this:
and NEVER this:
I tried numerous combinations of white-space: nowrap; to no avail. When ANY lines break, they need to ALL break at the same time. Maybe this could be accomplished with a <table>?
Thank you for your help. The CSS needs to be inline and without media queries. JavaScript support for HTML email is very limited and non-reliable, therefore, I wish to do without it.
A JSFIDDLE for editing can be found here.
The layout which you are trying is possible using media queries or javascript. but most of the email templates doesn't support both solutions.
So, as I see, you have two options:
it will be better if you always keep the footer items independent to each row i.e add br tags between the nav tags.
or
Create different email templates based on the resolution.
Personal suggestion: I would have gone with the first option.
<nav style="display:inline; white-space:nowrap;">
<a moz-do-not-send="true" style="text-decoration:none; word-break:break-all; color:white;" href="tel:1234567890">
(123) 456-7890
</a>
</nav>
Use
word-break:break-all;
Jsfiddle
http://jsfiddle.net/f1uuwexy/8/
You can do this using only html:
<div>
www.hazardmoving.com<br />
Patrickhazard#yahoo.com<br />
(123) 456 7890<br /></div>
You seem to try pushing css beyond its limits
If you feel comfortable including bootstrap you can try:
<link rel="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div style="width: 600px; margin: 60px auto; text-align: center;">
<div class="col-md-4">www.hazardmoving.com</div>
<div class="col-md-4">Patrickhazard#yahoo.com</div>
<div class="col-md-4">(123) 456 7890</div>
</div>
That should do the work. Check my pen:
http://codepen.io/anon/pen/EajwXp
I'm trying to set up Google Sites for my own personal website:
<html>
<head>
<title>...</title>
</head>
<body background="page_bg.png" text="#000000" bgcolor="#333333">
<div align="center"><img src="content.jpg" border="0" alt=""></div>
</body>
</html>
So all I want is a background picture (I accomplished to do this under settings) and only one picture in the middle of the site itself. I was trying to get rid of all the gimmicks (such as the sidebar, shadows of the frame, etc.) but I failed. Is it even possible to do this?
The reason I use Sites is, because the web address "https://sites.google.com/site/my_name_here/" is clear, it's free and it makes my site appear in the google search.
edit, my solution: I found a template called "Blank Template (Black)" which didn't contain anything (no sidebar, etc). I added my own background picture, inserted my content.jpg and done.
I guess you have to use something like:
<body style="background:#333333 url('page_bg.png'); color=#000000;">
<div style="text-align:center;"><img src="content.jpg" border="0" alt=""></div>
</body>
Oh ok, right! I think you cannot add your own styles using html/css. But if you go to "Managing Web site" there is a "Colors and fonts" option, and there you make you own customization for some elements, like select a different background color.
Is that what you're looking for Thomas?
My solution: I found a template called "Blank Template (Black)" which didn't contain anything (no sidebar, etc). I added my own background picture, inserted my content.jpg and done.
I am building a html email. it looks fine in outlook 2003, outlook 2007, hotmail, gmail, yahoo but in outlook web app has breaks between the rows. has anyone had these issues with outlook web app?
i have display block on the images but it looks like they get stripped out.
This was fixed by wrapping the elements in <span style="display:block"></span>
E.G:
<a href="http://www.url.com">
<img src="example.jpg" />
</a>
becomes
<a href="http://www.url.com">
<span style="display:block;">
<img src="example.jpg" />
</span>
</a>
but needs doing on all broken elements
Various styling is being stripped, so inline-styling will NOT work with images in OWA.
Here's a simple example of what Bill the Lizard was referring too:
<span style="display:block"><img src="myFancyImage.gif"/></span>
Without the above code it may look like extra padding/margin is creating space between tables and table rows/columns.... basically the issue that brought you to this page.
Use this inline css
<span style="margin:0; padding:0; display:block;"><img src="myFancyImage.gif"/></span>
I had the same problem, and unfortunately none of these solutions worked.
The display:block was always being striped out, no matter whether I wrapped the image in span or font tags.
Eventually, I found that wrapping the image in a DIV with inline width and height solved the problem. I guess because DIVs are block elements already, and it seems the only styles that OWA doesn't strip out are width and height.
e.g.
<td width="475" height="73" valign="top" bgcolor="#e9e9e9">
<div style="display:block;width:475px;height:73px"><img src="../images/email/email_02.jpg" alt="Three Barrels" width="475" height="73" style="display:block;border:none;outline:none;line-height:0;float:left;" /></div>
</td>
I tried the fix above and it didn't work - but this worked for me:
I just added this code at the top of the email code.
/* FIX FOR OWA */
.bdyItmPrt img { display:block !important; }