Trying to create a nice html email with a border around the content, but haven't figure that out.....there is always something..... Thanks for a help!
<table bgcolor="#ACD13C" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table bgcolor="#ffffff" width="500" cellpadding="0" cellspacing="0">
<tr>
<td>Text goes here</td>
</tr>
</table>
</td>
</tr>
</table>
like this???
<!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</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
min-width: 100%!important;
}
.content {
width: 100%;
max-width: 600px;
}
.header {
padding: 40px 30px 20px 30px;
}
</style>
<style type="text/css">
#media only screen and (min-device-width: 601px) {
.content {
width: 600px !important;
}
}
</style>
</head>
<body>
<table width="100%" bgcolor="#ACD13C" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="header" bgcolor="#ACD13C">
Text goes here
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You can wrap your table in a div, make it's background that green and width:100%, change the background of your table to white and its width to 500, the margin:0 auto will center the table, like this:
JS Fiddle- updated
<div style="width:100%; background-color:#ACD13C; padding:50px 0; ">
<table style="margin:0 auto;" bgcolor="white" width="500" cellpadding="0" cellspacing="0">
<tr>
<td>Text goes here</td>
</tr>
</table>
</div>
Something like that?
td {
border: 1px solid black;
}
<table bgcolor="#ACD13C" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table bgcolor="#ffffff" width="500" cellpadding="0" cellspacing="0">
<tr>
<td>Text goes here</td>
</tr>
</table>
</td>
</tr>
</table>
do u want to see like this??
<!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</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
min-width: 100%!important;
}
.content {
width: 100%;
max-width: 600px;
}
.header {
padding: 40px 30px 20px 30px;
}
</style>
<style type="text/css">
#media only screen and (min-device-width: 601px) {
.content {
width: 600px !important;
}
}
</style>
</head>
<body>
<table width="100%" bgcolor="#ACD13C" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="header" bgcolor="#ffffff">
Text goes here
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Related
I have a table that has the first row with a column span of 3 and the next row with 3 columns holding images. I have tried several forms of wrapping and CSS and cannot get the email to load correctly.
here is my code i have modified and the original i started with. What am I doing wrong?
modified so far
<html>
<head>
<style>
body{width: 100%; height: auto; background-color: #edebf1}
<!--table{width: 100%; height: auto}-->
<!--img{width: 100%!important; height: auto!important;}-->
img{border:none; width: 100% !important;height:auto; line- height:100%; outline:none;}
.ExternalClass{width:100%; height: auto;}
table {width: 100%; height: auto; border-collapse:separate;}
td{cellpadding:0px; border-spacing:0px;}
tr{cellpadding:0px; border-spacing:0px;}
</style>
<title>Webinar Invite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!--[if mso]>
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="560">
<![endif]-->
<table id="Table_01" width="8412" height="4183" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="images/Webinar-Invite2_01.png" width="8412" height="2619" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Webinar-Invite2_02.png" width="3971" height="1564" alt=""></td>
<td>
<a href="Webinar address" target="_Blank"
onmouseover="window.status='Registration for Webinar'; return true;"
onmouseout="window.status=''; return true;">
<img src="images/Webinar-Invite2_03.png" width="2042" height="1564" border="0" alt=""></a></td>
<td>
<img src="images/Webinar-Invite2_04.png" width="2399" height="1564" alt=""></td>
</tr>
</table>
<!--[if mso]>
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
</table>
<![endif]-->
</body>
</html>
Original
<html>
<head>
<style>
body{width: 100%; height: auto; background-color: #edebf1}
table{width: 100%; height: auto}
img{width: 100%; height: auto}
</style>
<title>Webinar Invite2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="8412" height="4183" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="images/Webinar-Invite2_01.png" width="8412" height="2619" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Webinar-Invite2_02.png" width="3971" height="1564" alt=""></td>
<td>
<a href="webinar address" target="_Blank"
onmouseover="window.status='Registration for Webinar'; return true;"
onmouseout="window.status=''; return true;">
<img src="images/Webinar-Invite2_03.png" width="2042" height="1564" border="0" alt=""></a></td>
<td>
<img src="images/Webinar-Invite2_04.png" width="2399" height="1564" alt=""></td>
</tr>
</table>
</body>
</html>
I run your code, you could replace your code with the below code:
<html>
<head>
<style>
body{width: 100%; height: auto; background-color: white; margin:0;}
/* img{border:none; width: 100% !important;height:auto; line-height:100%; outline:none; display:inline-block} */
.ExternalClass{width:100%; height: auto;}
td{cellpadding:0px; border-spacing:0px;width:20px;height:20px;border: 1px solid #666666;}
tr{cellpadding:0px; border-spacing:0px;}
#Table_01{
width:200px;
height:200px;
border:0;
border-collapse:separate;
border: 1px solid #000000;
}
.tab_img{
width:20px;
height:20px;
display:inline-block;
}
.tsb_img1{
border:0;
}
</style>
<title>Webinar Invite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table id="Table_01" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="" class="tab_img" alt=""></td>
</tr>
<tr>
<td>
<img src="" class="tab_img" alt=""></td>
<td>
<a href="" target="_Blank"
onmouseover="window.status='Registration for Webinar'; return true;"
onmouseout="window.status=''; return true;">
<img src=" " class="tab_img " alt=""></a></td>
<td>
<img src="" class="tab_img" alt=""></td>
</tr>
</table>
</body>
</html>
This is my c# code:
static void Main(string[] args)
{
string stringHtmlBodyfromFile = File.ReadAllText(HTML file path);
Outlook.Application objOutlook = new Outlook.Application();
Outlook.MailItem mailItem = (Outlook.MailItem)(objOutlook.CreateItem(Outlook.OlItemType.olMailItem));
mailItem.To = "";
mailItem.Subject = "hi";
mailItem.HTMLBody = stringHtmlBodyfromFile;
Console.WriteLine(stringHtmlBodyfromFile);
mailItem.Display();
}
This is my result:
I have this email template:
<!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" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>title</title>
<style type="text/css">
img { max-width: 600px; -ms-interpolation-mode: bicubic;}
.ReadMsgBody { width: 100%; }
.ExternalClass {width:100%;}
.backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
body {
width: 100%;
height: 100%;
direction: rtl;
}
.force-full-width {
width: 100% !important;
}
</style>
<style type="text/css" media="only screen and (max-width: 599px)">
#media only screen and (max-width: 599px) {
table[class*="w320"] {
width: 320px !important;
}
}
</style>
</head>
<body dir="rtl" class="body" style="width:100vw; padding:0; margin:0; display:block; background:#ffffff; -webkit-text-size-adjust:none" bgcolor="#ffffff">
<table align="center" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#ffffff" width="100%">
<center>
<table cellspacing="0" cellpadding="0" width="600" class="w320">
<tr>
<td align="center" valign="top">
<table class="force-full-width" width="100%" cellspacing="0" cellpadding="20" bgcolor="#ef6900">
<tr>
<td style="background-color:#ef6900; color:#ffffff; font-size: 14px; text-align: center;">
Some text
</td>
</tr>
</table>
<!-- more tables -->
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>
It does work on Gmail app in Android, but in desktop version email content overflows <u></u>.
If I remove width:100vw; from body tag, desktop works fine but content overflows in mobile version. My Question is How can I make body width 100% in mobile and 600px on desktop? I tried max-width: 600px; in body style but it doesn't work. I also tried 100% instead of 100vw (because 100 vw is width of screen) and it does not work either.
I made a few changes, hope this is the outcome you were after. I have done the following:
removed width:100vwfrom the body
added the class body you are using on the body tag with the body CSS defined.
Changed the media query (removed space)
<!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" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>title</title>
<style type="text/css">img { max-width: 600px; -ms-interpolation-mode: bicubic;}
.ReadMsgBody { width: 100%; }
.ExternalClass {width:100%;}
.backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
body, .body {
width: 100%;
height: 100%;
direction: rtl;
}
.force-full-width {
width: 100% !important;
}
</style>
<style media="only screen and (max-width: 599px)" type="text/css">#media only screen and (max-width:599px) {
table.w320 {
width: 320px !important;
}
}
</style>
</head>
<body bgcolor="#ffffff" class="body" dir="ltr" style="padding:0; margin:0; display:block; background:#ffffff; -webkit-text-size-adjust:none">
<table align="center" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" style="background-color:#ffffff" valign="top" width="100%">
<center>
<table cellpadding="0" cellspacing="0" class="w320" width="600">
<tbody>
<tr>
<td align="center" valign="top">
<table bgcolor="#ef6900" cellpadding="20" cellspacing="0" class="force-full-width" width="100%">
<tbody>
<tr>
<td style="background-color:#ef6900; color:#ffffff; font-size: 14px; text-align: center;">Some text</td>
</tr>
</tbody>
</table>
<!-- more tables --></td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Above code tested in Outlook 2017 and Gmail app (v8.2.11) works properly now.
If you have any questions let me know.
Your email will work just fine if you remove width:100vw; from the body tag.
I am making a newsletter with foundation. I need to get my background to go to full width, but at the moment the full width is defined in center:
My Example
How can I make the background color go full width? Foundation has made a prewritten CSS, where the width should be defined:
.wrapper {
width: 100%; }
#outlook a {
padding: 0; }
body {
width: 100% !important;
min-width: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
Margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>A title</title>
<link rel="stylesheet" href="css/foundation-emails.css" />
<style type="text/css">
.bgcolor {
background-color: #fff;
}
.bgcolor--blue {
background-color: #ccd8db;
}
.bgcolor--content--light {
background-color: #ebe4cf;
}
.bgcolor--footer {
background-color: #e8e8e8;
}
</style>
</head>
<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<table class="container" align="center">
<tbody>
<tr>
<td>
<!-- Row 1 -->
<table class="row collapse" border="1px solid red">
<tbody>
<tr>
<th class="small-12 large-12 columns first">
<table>
<tr>
<th>
<center>
<img src="http://bbacher.weebly.com/uploads/8/4/6/2/8462405/6449752.jpg" alt="Logo" align="center" class="float-center">
</center>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<!-- Row 2 -->
<table class="row collapse bgcolor--blue">
<tbody>
<tr>
<th class="small-12 large-12 columns">
<table>
<tr>
<th>
<center>
<img src="http://24.media.tumblr.com/7a40daf7853d830815fb83f79752e94a/tumblr_mz2izkaidT1rfn9zxo4_500.png" alt="Fashion news" align="center" class="float-center">
</center>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>
Table have padding and cellspacing by default. You'll need to manually remove these in order for your content to take up the full width and height of the element.
You'll need to do this on every table tag.
<table cellpadding="0" cellspacing="0">
https://jsfiddle.net/wb9qg34e/
With regards to the table not being responsive. You have set static widths to the table and there is a class pulling through that has a min width on
td.large-12 center, th.large-12 center {
min-width: 532px;
}
If you remove the width from the table.container and add a new class like below, it should be fully responsive.
td.large-12 center, th.large-12 center {
min-width: auto;
}
I'm trying to make an html mail so I need to use inline CSS. The problem is that I can't figure out why the cell height I set doesn't display as I intended. I've set the % height of the cells like I would them to be, but the result isn't as I expected.
The code is this and as you can see the result is not like I intended because I've set 15% for the header but in the result is obviously not 15% and no matter the value it does not change the result. The same thing happens with the other td:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset="UTF-8">
<title></title>
</head>
<body>
<table style="table-layout:fixed; width:56%; height:100%;" border="1" bordercolor=black align=center>
<tr>
<th colspan="2" style="height:15%; width:100%;" >
<a href="http://www/">
<img src="D:\web_mail\EN_TW1-EE_3D-Logo.pn" width="56%" alt="Header"/> </a>
</th>
</tr>
<tr>
<td style="border-right-width: 0.5px; border-bottom-width: 1px; height:10%; width:50%;" >
<img src="D:\web_mail\Halo_4_-_Master_Chief.pn" width="100%" alt="Patrik" />
</td>
<td style="border-left-width: 0.5px; border-bottom-width: 1px; height:10%; width:50%;" >
<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%" alt="Alberta" />
</td>
</tr>
<tr>
<td colspan="2" style="height:60%; width:100%;" >
<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%" alt="Igor"/>
</td>
</tr>
<tr>
<th colspan="2" style="height:15%; width:100%;" >
<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="56%" alt="Footer"/>
</th>
</tr>
</table>
</body>
</html>
I hope you can help me.
To have the image to stretch to the same height and width as the containing boxes, simply add a 100% width and a height equal to the row it is in:
http://jsfiddle.net/j2bcc24o/4/
If you just want the width, go for:
http://jsfiddle.net/j2bcc24o/3/
<td style="border-right-width: 0.5px; border-bottom-width: 1px; height:10%; width:50%;">
<img src="image.png" width="100%" height="10%" alt="Patrik" />
</td>
And also don't forget to set html and body to 100% height and width as well as 0 padding and margin:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
i am not able to understand your problem properly,
assign class to td and set the height
<td class="classname">
</td>
.className{
height:20%;
background:red;
}
Try the below code
let me know if you need any help.
<html>
<head>
<style>
html,body{
height:100%;
margin:0 auto;
}
table{
table-layout:fixed;
width:56%;
height:100%;
border:1px solid #000;
text-align:center;
margin:0 auto;
}
table th{
height:15%;
width:100%;
}
.className{
height:20%;
background:red;
}
td{
height:50%;
border:1px solid #000;
background:#000;
width:100%;
}
</style>
</head>
<body>
<table >
<tr>
<th colspan="2" >
<img src="D:\web_mail\EN_TW1-EE_3D-Logo.pn" width="56%" alt="Header"/>
</th>
</tr>
<tr>
<td >
<img src="D:\web_mail\Halo_4_-_Master_Chief.pn" width="100%" alt="Patrik" />
</td>
<td >
<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%" alt="Alberta" />
</td>
</tr>
<tr>
<td colspan="2" class="className" >
<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%" alt="Igor"/>
</td>
</tr>
<tr>
<th colspan="2" >
<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="56%" alt="Footer"/>
</th>
</tr>
</table>
</body>
</html>
Defining height in percentage will not work with td/div, specially for the mailers, need to assign pixel values only.
HI ,
I am getting Gap(some white space) between the <HR> & <TABLE> tags in IE6. But the same code is working differently in IE8 & FF. Here is the my sample code.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
* {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div style="display: inline; height: 100%;" id="printdiv">
<table width="70%" id="Tableprint">
<tbody>
<tr>
<td style="padding-left: 15px;">
<table width="100%" style="border: 0px solid rgb(204, 204, 204);">
<tbody>
<tr>
<td nowrap="" colspan="2">
<span class="formLabel">dev site</span>
<span class="bodyText">Transfer Secure </span></td>
</tr>
<tr>
<td nowrap="" align="left" width="50%" valign="bottom">
<span><b>Current Date:Wednesday, 02 Mar 2011, 01:42 IST</b></span>
<span><b>Report Date</b></span>
<span>Wednesday,20 Oct 2010</span></td>
<td align="right" valign="bottom">
<input type="button" id="Buttoncancel" value="BACK">
</td>
</tr>
</tbody>
</table>
<hr align="left" width="100%">
<table cellspacing="0" width="100%" style="border: 1px;">
<thead>
<tr>
<td style=" width: 10%; padding-left: 5px;"><b>Column1</b></td>
<td align="right" style="padding-bottom: 3px; font-weight: bold;">Credit</td>
</tr>
</thead>
</table>
<hr align="left" width="100%">
<div id="Footer">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td align="right">Test Data</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
If I add the following style then I am getting space in IE 8 & FF but the problem is in IE 6 I am seeing extra space around the <HR>
hr {
margin-bottom: 7px;
margin-top: 7px;
}
Please Help me in this.
Thanks in Advanceenter code here
Add this CSS:
table, tr, td, hr {
line-height: 1.15;
}
hr {
clear: both;
display: block;
*margin: -7px 0; /* ie7 and below */
}
This helped me, but the site isn't working properly, so here's a cached link.