michali
Reputation: 3842
Email html - how to change my html/css to look good on outlook
I tried to send email html, but it looks really bad on outlook. When I open it with mobile browser or any browser it looks great. I have tried reading some articles there were no major changes.
What am I doing wrong? please help
This is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="">
.details-div {
width: 500px;
height: 257px;
border: 3px rgb(244, 254, 255) solid;
padding: 0px;
background: rgb(237, 237, 237);
color: rgb(82, 78, 78);
font-size: 16px;
font-weight: normal;
font-family: tahoma;
font-style: normal;
text-decoration: none;
text-align: left;
line-height: 1.45em;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
top: 20px;
margin-left: 17px;
padding-left: 20px;
padding-top: 20px;
}
.main-title
{
margin-left: 92px;
margin-top: -37px;
font-family: tahoma;
font-weight: normal;
color: rgb(23, 164, 223);
}
.report-button
{
width: 77px;
height: 3px;
margin-top: 25px;
border-radius: 4px;
margin-left: 152px;
background-color: rgb(23, 164, 223);
position: absolute;
font-family: tahoma;
font-size: 17px;
color: white;
padding: 11px;
padding-bottom: 24px;
text-align: start;
box-shadow: white;
border: rgb(229, 237, 237);
border-width: 10px;
}
.main-div
{
background-color: rgb(237, 237, 237);
margin: 0 auto;
position: relative;
width: 100%;
height: 50000px;
border-radius: 25px;
margin-left: 17px;
margin-top: -3px;
border: 3px rgb(244, 254, 255) solid;
}
.CSSTableGenerator {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #000000;
-moz-border-radius-bottomleft:9px;
-webkit-border-bottom-left-radius:9px;
border-bottom-left-radius:9px;
-moz-border-radius-bottomright:9px;
-webkit-border-bottom-right-radius:9px;
border-bottom-right-radius:9px;
-moz-border-radius-topright:9px;
-webkit-border-top-right-radius:9px;
border-top-right-radius:9px;
-moz-border-radius-topleft:9px;
-webkit-border-top-left-radius:9px;
border-top-left-radius:9px;
width:1000px;
}
.CSSTableGenerator table{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:9px;
-webkit-border-bottom-right-radius:9px;
border-bottom-right-radius:9px;
height:20px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:9px;
-webkit-border-top-left-radius:9px;
border-top-left-radius:9px;
height:20px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:9px;
-webkit-border-top-right-radius:9px;
border-top-right-radius:9px;
height:20px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:9px;
-webkit-border-bottom-left-radius:9px;
border-bottom-left-radius:9px;
height:20px;
}.CSSTableGenerator tr:hover td{
}
.CSSTableGenerator tr:nth-child(odd){ background-color:#ffffff; }
.CSSTableGenerator tr:nth-child(even) { background-color:#d3e9ff; }.CSSTableGenerator td{
vertical-align:middle;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:9px;
font-size:10px;
font-family:Verdana;
font-weight:normal;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #23aae0 5%, #007fff 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #23aae0), color-stop(1, #007fff) );
background:-moz-linear-gradient( center top, #23aae0 5%, #007fff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#23aae0", endColorstr="#007fff"); background: -o-linear-gradient(top,#23aae0,007fff);
background-color:#23aae0;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Verdana;
font-weight:bold;
color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #23aae0 5%, #007fff 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #23aae0), color-stop(1, #007fff) );
background:-moz-linear-gradient( center top, #23aae0 5%, #007fff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#23aae0", endColorstr="#007fff"); background: -o-linear-gradient(top,#23aae0,007fff);
background-color:#23aae0;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div id="headline_div" style=" width: 90%; height: 10%;">
<img alt="" src="http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/Clipboard-icon.png" style=" width: 2%;height: 5%;margin-left: 46px;margin-top: 19px;">
<h2 class="main-title">Automation report</h2>
</div>
<div id="details_div" class="details-div">
Auto2 Version: 110.1.5.0-SNAPSHOT <br>Auto2 Machine: 7020-171096 <br> GateWay IP: 10.100.30.20 <br> MX IP : 10.100.30.20 <br> Date: Sun May 10 13:16:09 IDT 2015 <br>Tested on version: : 11.0.0.0_0.19135 <br>Build date: Mon 08 Dec 2014 04:25:10 PM IST <br>
<a href="index.html">
<div id="report_link_btn" style=" width: 5%; height: 7%; margin-top: 12px; border-radius: 4px; margin-left: 152px; background-color: rgb(23, 164, 223); position: absolute; font-family: tahoma; font-size: 17px; color: white; padding-left: 11px; padding-bottom: 24px; text-align: start; box-shadow: white; border: rgb(229, 237, 237); border-width: 10px;">
<p id="report__details_txt" style="position: relative; top: 9px;">Report</p>
<div id="report_link_img_div" style="margin-top:-32px;position:relative"><img alt="" src="http://icons.iconarchive.com/icons/double-j-design/super-mono-3d/128/button-round-arrow-right-icon.png" style="width: 31px; height: 37px; left: 53px; top: 0px; position: relative;"></div>
</div>
</a>
</div>
<div id="main_div" class="main-div">
<h3 style="position: relative; margin-left: 66px; font-style: normal;">Run Summary: </h3>
<div id="summary_data_div" class="details-div" style="width: 290px; height: 120px; border-color: rgb(255, 255, 255); background-color: #17A4DF; position: relative; top: 40px; left: 140px; border-radius: 9px; border-width: 1px; color: white; padding;13px">Tests Ran : 1<br>Tests Passed : 0<br>Tests Failed : 1<br>Time : 21.883</div>
<div id="plan_table_div" class="CSSTableGenerator" style="position: relative; top: 112px; left: 30px;">
<table>
<tr id="table_columns_row">
<td id="column_td_name_Name">Name</td>
<td id="column_td_name_Total Tests">Total Tests</td>
<td id="column_td_name_passed">passed</td>
<td id="column_td_name_Failed">Failed</td>
<td id="column_td_name_Time(s)">Time(s)</td>
<td id="column_td_name_Setup">Setup</td>
</tr>
<tr id="plan_TEST-plan1">
<td>TEST-plan1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>21.883</td>
<td>[iniesta (One-Box)]</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Upvotes: 2
Views: 6719
Answers (2)
Julesezaar
Reputation: 3396
Creating good HTML/CSS emails from scratch requires experience. There is so much going on, things you can't do, things you must do. A lot of exceptions to build in your template according to the different email clients that end-users open your email in. (Outlook ->the application, Outlook.com ->the website, Iphone, Gmail on Android, and many more...)
Overall the basic rules:
- use good old table -> tr -> td code. Do not use div's as major structure blocks.
- Try to do your styling with HTML attributes first, if that is not enough, add some widely accepted css to it (for instance: table align="right" works better then style="float: right;" although a combination of the 2 together is the best ;) )
- only use css and CSS selectors that are accepted by almost all email clients: https://www.campaignmonitor.com/css/
- only use background images when you have a lot of experience or stay away from it!
- only try to make responsive designs (that have to work on every platform) when you have some experience
- only use media queries as optional extra's, and NOT for important styling and structures
In your case I would start rewriting the advanced css selectors like tr:last-child and stuff like that. It's just not going to work properly
Upvotes: 1
Eugene Astafiev
Reputation: 49395
The fact is that Outlook uses Word (not IE) for rendering HTML markup. You can read about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the following series of articles in MSDN:
- Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
- Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
Hope you will find this information helpful.
Upvotes: 2
Related Questions
- Email template in outlook, CSS not working properly ? Any fix or Alternative CSS?
- HTML: Outlook not rendering correctly email
- Outlook email rendering CSS
- Formatting html email for Outlook
- HTML Email style not working in Outlook
- Html emails <hr/> styling issue
- E-mail template and outlook
- Cant fix css for Outlook email
- HTML not displaying as expected in outlook
- HTML Email Outlook