I have attempted to insert an html image withing an email (Outlook) to save as a template. I am finding that there is a slice that should repeat is not working correctly (to have the color extend to where the text ends). Is there someone who may be able to assist me in this matter? Below is the coding that I am using.
<HTML>
<HEAD>
<TITLE>Ticket Closure Notice</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR="#FFFFFF" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">
<TABLE WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD width="114" valign="top"><IMG SRC="http://intranet.ca.state.gov/email_templates/images/left_bar_outages_advisory.gif"></TD>
<TD valign="top" width="100%">
<TABLE WIDTH=100% height="100%" BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD height="128" bordercolor="#FFFFFF" background="images on server 2/top_bar_advisory_tile.gif">
<img src="images on server 2/top_bar_advisory.gif" width="157" height="128"></TD>
</TR>
<TR>
<TD height="100%" bordercolor="#FFFFFF"><br>
<br></TD>
</TR>
<TR>
<TD align="right" height="74"><br>
<hr style="BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; WIDTH: 100%; BORDER-BOTTOM: gray 1px solid; HEIGHT: 1px; TEXT-ALIGN: right">
<img src="http://intranet.ca.state.gov/email_templates/images/CA-CST-lg.gif" width="144" height="52" border="0"></TD>
</TR>
</TABLE>
</TD>
</TR></TABLE>
</BODY>
</HTML>
There are all kinds of style attributes that don't work in outlook (and other mail clients).
Here's a good guide: http://www.campaignmonitor.com/css/
Related
I made a html email signature, opened it up in browser where it looks fine, and pasted it into my gmail signature section, and each individual block has now got padding in between, and some of the blocks are side by side instead of next to each other.
Strangely by some fluke I managed to get it to look fine on outlook.This is what it's supposed to look like this https://postimg.org/image/uytldx3zd/
Here is the code i'm using- what am I doing wrong?
Any fix would be much appreciated,
Thanks
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
td {line-height:0; font-size: 0.0em; }
img { display: block; float: left; padding: 0; align: absbottom; align: texttop; }
</style>
</head>
<!-- Paste Code Under This Line
_________________________________________________________________________________ -->
<title>emailsignature_500flat</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (emailsignature_500flat.psd) -->
<table id="Table_01" width="550" height="357" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href= callto:4411893280328><img src="https://s20.postimg.org/tk69dnist/emailsignature_500flat_01.jpg" width="254" height="50" alt=""><a href= callto:441189328032></td>
<td rowspan="3">
<a href=http://thereadinesscomp.com><img src="https://s20.postimg.org/o8rcsyrl9/emailsignature_500flat_02.jpg" width="296" height="113" alt=""><a href=http://thereadinesscom.com></td>
</tr>
<tr>
<td>
<a href=http://thereadinesscomp.com><img src="https://s20.postimg.org/s54ooxx59/emailsignature_500flat_03.jpg" width="254" height="32" alt=""></td>
</tr>
<tr>
<td>
<a href=https://www.linkedin.com/company/129626/><img src="https://s20.postimg.org/oya55b4zh/emailsignature_500flat_04.jpg" width="254" height="31" alt=""></td>
</tr>
<tr>
<td colspan="2">
<a href=mailto:info#thereadinesscomp.com><img src="https://s20.postimg.org/c6vyytq2l/emailsignature_500flat_05.png" width="550" height="146" alt=""><a href=mailto:info#thereadinesscomp.com></td>
</tr>
<tr>
<td colspan="2">
<img src="https://s20.postimg.org/t7ev7hnod/emailsignature_500flat_06.jpg" width="550" height="98" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
<!-- Keep Pasted Code Above This Line!
_________________________________________________________________________________ -->
</html>
I found the following errors in your code.
missing closing anchor tags,
missing colspan
CSS should be inline always
Here is the HTML you need:
<table id="Table_01" width="550" height="357" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="line-height:0; font-size: 0.0em;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="line-height:0; font-size: 0.0em;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="line-height:0; font-size: 0.0em;">
</td>
</tr>
<tr>
<td style="line-height:0; font-size: 0.0em;">
</td>
</tr>
<tr>
<td style="line-height:0; font-size: 0.0em;">
<a href=https://www.linkedin.com/company/1296265><img src="https://s20.postimg.org/oya55b4zh/emailsignature_500flat_04.jpg" width="254" height="31" alt="" style="display: block; float: left; padding: 0; " /></a>
</td>
</tr>
</table>
</td>
<td style="line-height:0; font-size: 0.0em;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="line-height:0; font-size: 0.0em;">
</td>
</tr>
<tr>
<td style="line-height:0; font-size: 0.0em;">
<img src="https://s20.postimg.org/t7ev7hnod/emailsignature_500flat_06.jpg" width="550" height="98" alt="" style="display: block; float: left; padding: 0;">
</td>
</tr>
</table>
Let me know if this works for you.
I'm working on HTML email template.
I created it with a few nested tables.
I found that there are spaces to the right of the images in Outlook.
So I tried to fix this, but it doesn't fix.
Finally I create a simple template depending on colored images which I create to make it possible identifying the table cells.
Here's my code (Please copy it and test on Outlook):
<!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>HTML Email Design Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style media="all" type="text/css">
table td {
border-collapse: collapse;
}
img { padding: 0; margin: 0; display:block;}
</style>
</head>
<body style="margin: 0; padding: 0;" bgcolor="#cccccc">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table bgcolor="#ffffff" align="center" border="0" cellpadding="0" cellspacing="0" width="600" height="600" style="border-collapse: collapse; border: 1px solid #000000;">
<tr>
<td align="center" style="padding: 40px 0 40px 0; font-size: 26px; font-weight: bold; font-family: Arial, sans-serif;">
First Row
</td>
</tr>
<tr>
<td>
<table width="600" height="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#08336d">
<tr>
<td width="300" height="600">
<img src="http://2a-web.com/email/test/images/img-01.jpg" width="300px" height="600px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
<td width="300" height="600">
<table width="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="300" height="300">
<img src="http://2a-web.com/email/test/images/img-02.jpg" width="300px" height="300px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
</tr>
<tr>
<td width="300" height="300">
<table width="300" height="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150" height="300">
<img src="http://2a-web.com/email/test/images/img-03.jpg" width="150px" height="300px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
<td width="150" height="300" bgcolor="#ffc33c">
<table width="150" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150" height="150">
<img src="http://2a-web.com/email/test/images/img-04.jpg" width="150px" height="150px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
</tr>
<tr>
<td width="150" height="150" bgcolor="#16b512">
<table width="150" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="75" height="150">
<img src="http://2a-web.com/email/test/images/img-05.jpg" width="75px" height="150px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
<td width="75" height="150">
<img src="http://2a-web.com/email/test/images/img-06.jpg" width="75px" height="150px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 40px 0 40px 0; font-size: 26px; font-weight: bold; font-family: Arial, sans-serif;">
Third Row
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
So, how can I remove the gap between cells ?
I'm appreciating your help.
After taking a look and testing in outlook with your provided HTML, I believe I know what you are experiencing, and it has to due with images.
First off, all the images in your HTML are not available so I had to test with my own images. These is where, I noticed the issue. My images were causing to email to expand beyond the specified width of 600. This is because for outlook if you are going to use width and height attributes for a element, you leave off the px part, it's assumed. I.E. 150 NOT 150px. As soon as I did everything snapped into place, no spacing issue.
I was only able to reproduce the vertical spacing/gapping on the right of the images after I forced one of the bottom images to have an exaggerated width, i.e. it's currently set to 150(same as the containing td), so I set it to 155. And bam! Got the spacing.
Meaning that your table layout/css is fine for the most part, outlook is probably freaking out because you are adding the px part. Either remove it or set the width/height with inline styling instead.
Between two tables am getting vertical space like 1px of border in outlook 2013, 2010, and 2007.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table width="700" align="left" border="0" cellspacing="0" cellpadding="0" bgcolor="#fffcf5" style="background-color:red; border:none; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse;">
<tr>
<td width="15"><table width="300" align="left" border="0" cellspacing="0" cellpadding="0" bgcolor="#fffcf5" style="background-color:#000000; border:none; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse;" background="#000000">
<tr>
<td width="15" height="170">logo </td>
</tr>
</table>
<table width="490" height="170px" align="left" border="0" cellspacing="0" cellpadding="0" bgcolor="#fffcf5" style="background-color:#000000; border:none; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse;" background="#000000">
<tr bgcolor="#ffffff">
<td width="15" height="35px">emptyspace</td>
</tr>
<tr bgcolor="red">
<td width="15" height="100">heading</td>
</tr>
<tr bgcolor="#ffffff">
<td width="15" height="35">emptyspace</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Its working fine in chrome and Firefox browsers.
This is the image which am getting error in outlook 2013. Hi sir here am getting some issue in outlook 2013 so am sending screen shot kindly have a look and help me.!
You had some oversized widths in your email give this a try...
<table width="700" border="0" cellspacing="0" cellpadding="0"
style="background-color:green;
border:none;
border-collapse:collapse;">
<tr>
<td>
<table width="300" align="left" border="0" cellspacing="0" cellpadding="0" bgcolor="orange"
style=" border:none;
border-collapse:collapse;">
<tr>
<td width="15" height="170">logo </td>
</tr>
</table>
<table width="400" height="170px" align="left" border="0" cellspacing="0" cellpadding="0" bgcolor="#fffcf5"
style="background-color:#000000;
border:none;
border-collapse:collapse;">
<tr bgcolor="#ffffff">
<td width="15" height="35px">emptyspace</td>
</tr>
<tr bgcolor="red">
<td width="15" height="100">heading</td>
</tr>
<tr bgcolor="#ffffff">
<td width="15" height="35">emptyspace</td>
</tr>
</table>
</td>
</tr>
</table>
</table>
in emails you'll need to add style="display:block;" to images for them to remove the padding
Add style="margin: 0px;" to all the tables, tr, and td because Outlook automatically adds a 1px margin round the tables if no margin is specified.
You might need to add padding: 0px; as well.
This is based on my own trial and error, please comment below if it doesn't work, will try and update my answer.
my friend developer has some problem with an html email. The big problem I can see on my mail app is a big margin-top he didn't put in the css and two little margins (right and left) with the html margin: 0;
Do you have something to suggest?
Thank you very much.
<html>
<head>
<style type="text/css">
html,body{margin:0;padding:0; background-color:#f6f6f6}
table { width: 100%; height: 100%; }
span{font-family:Helvetica, Arial, sans-serif; line-height:1.7em;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#f6f6f6">
<tr height="95px" valign="middle" >
<td width="100%" align="left" style="padding:15px"><img src="logo_email.png" width="154" height="46" alt="good" /></td>
</tr>
<tr bgcolor="#eeeeee" height="95px" valign="middle">
<td width="100%" colspan="2" style="padding:15px"><span style="font-size:18px;color:#414042">Thank you for subscribe our newsletter.</span><br /><span style="font-size:13px;color:#414042">The Team</span></td>
</tr>
<tr height="auto" valign="top">
<td width="100%" colspan="2" style="padding:15px"><span style="font-size:10px;color:#6d6e71">You are receiving Activity Notifications emails.</span></td>
</tr>
</table>
</body>
</html>
The layout looks fine. There is an image on top that has a relative link and may not be showing - could this be the "margin-top" you are referring to?
I am looking to have a picture, name of the person, links to photos, biography, life, tell about you! a map tag where the location will be shown, also at the right, there will be details like like, Born: Nationality: Ocupation, Trakcs:
Can any body help me with a semantic html structure style with CSS Please use http://jsfiddle.net/ to build it online Thanks.
<!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>Your Yard Sales onproducts.line</title>
<link rel="stylesheet" href="" type="text/css" media="screen" />
</head>
<style type="text/css" >
#space {
margin-bottom:1.2em;
}
ul {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
li {
float: left; }
li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
</style>
<body>
<ul>
<li>Home</li>
<li>Members</li>
<li>Rollers</li>
<li>Info</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<div id="space">
Roberto Kirt
</div>
<!--<ul><li>'.$name2.'</li>
<li>'.$name2.'</li>
<li>'.$name2.'</li></ul>-->
<table width="1768" cellpadding="0" cellspacing="0" border="0.5">
<tr>
<td width="493" height="149"><img style="border:#666 1px solid;" src="images/profileimages/8.jpg" alt="Angel Pilier "align="left" width="100" height="130" border="1" /></td>
<td width="1275"><table width="880" border="0.5" cellpadding="0" cellspacing="0">
<tr>
<td width="145" height="31"> </td><td></td>
</tr>
<tr>
<td height="44" align="right">Born:</td><td width="735">1975-11-23</td>
</tr>
<tr align="right">
<td height="38"></td>
>
</tr>
<tr>
<td height="36" align="right">Died:</td><td width="735">0000-00-00</td>
</tr>
</table></td>
</tr>
<tr><td height="31" colspan="2"> </td></tr>
<tr>
<td height="31">Photos</td>
<td rowspan="7"><table width="885" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="145" height="31" align="right"> Nationality:</td><td width="740"></td>
</tr>
<tr align="right">
<td height="25"> </td>
</tr>
<tr>
<td height="24" align="right">Spouse:</td><td width="740"></td>
</tr>
<tr align="right">
<td height="28"> </td>
</tr>
<tr>
<td height="27" align="right">Ocupation:</td><td width="740">Pianist</td>
</tr>
<tr align="right">
<td height="27"> </td>
</tr>
<td height="27" align="right">Childhood:</td><td width="740"></td>
</tr>
<tr align="right"><td height="27"> </td>
</tr>
<td height="27" align="right">Tracks:</td><td width="740"></td>
</tr>
<tr align="right">
<td height="119"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25"> Biography</td>
</tr>
<tr>
<td height="25"> Life</td>
</tr>
<tr>
<td height="26">Tell an Anecdote</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td><iframe width="700" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Rochester,+New York,+United States&sspn=0.119541,0.110378&ie=UTF8&hq=&hnear=Rochester,+New York,+United States&z=14&output=embed"></iframe></td>
<!--<img src="images/foto.jpg" alt="nada" width="422" height="165" />-->
</tr>
</table>
</body>
</html>
#fello, there lot of things in your layout
1) use external stylesheet as much as possible because if you written your css in the head of html page it's make that html page heavy to load & you have to right new css in every new page.
2) try to avoid using table based structure as much as possible .Use div instead of table because it's flexible to use check this for more.
3)didn't use <br/> to much .If you want to give spacing you can give with margin & padding .
4)ever browser have applied some there own default properties .So, avoid it you have to use reset sheet .
5)for semantic markup check these links :
a) http://www.html-and-css-tutorial.com/tutorial-3.html
b) http://css-tricks.com/snippets/html/html5-page-structure/
c) http://themeshaper.com/2009/06/24/creating-wordpress-theme-html-structure-tutorial/
As far as I judge your question, use of some CSS framework like twitter-bootstrap will give you a very good and responsive layout in very less time :)
You might want to use hcard. This and other microformats are described here.