I wanted to send simple html code to email but in outlook it apears as a html code not images and text styled.
Should I include any more code so that outlook would recognize it as email and will not display the message as html code?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>Dragooon</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#e2e3e7" style="font-family:Arial, Helvetica, sans-serif;">
<table id="Table_01" width="602" align="center" height="3401" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="10">
<img style="display:block" src="/images/Concept1_01.gif" width="1" height="394" alt=""></td>
<td colspan="47">
<img style="display:block" src="/images/Concept1_02.gif" width="600" height="56" alt=""></td>
<td>
<img style="display:block" src="/images/spacer.gif" width="1" height="56" alt=""></td>
</tr><td>
<img style="display:block" src="/images/spacer.gif" width="1" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Your images are missing because you need to add the domain in front of it for example:
<td rowspan="10">
<img style="display:block" src="http://test.com/images/Concept1_01.gif" width="1" height="394" alt=""></td>
<td colspan="47">
<img style="display:block" src="http://test.com/images/Concept1_02.gif" width="600" height="56" alt=""></td>
<td>
<img style="display:block" src="http://test.com/images/spacer.gif" width="1" height="56" alt=""></td>
</tr><td>
<img style="display:block" src="http://test.com/images/spacer.gif" width="1" height="1" alt=""></td>
<td></td>
I think this might put you on the right track
http://www.emailaddressmanager.com/tips/html-email.html
Related
I've created an email footer by creating an image in photoshop and then slicing the image, which generates a base code. However, when it is added to Outlook, white space appears in the table and can't remove. I've tried various styles but it still has space.
Please see image where the 2 gaps are, there would be more gaps but because of the white background they don't show
The code is below, any advice would be much appreciated!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style meadia="screen" type="text/css">
td {line-height:0; font-size: 0.0cm; }
img { display: block; float: left; padding: 0; align: absbottom; align: texttop; }
</style>
</head>
<html>
<head>
<title>Website Style</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 (Website Style.pdf) -->
<table id="Table_01" width="601" height="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="6">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_01.png" width="600" height="47" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="47" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="3">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_02.png" width="292" height="118" alt=""></td>
<td>
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_03.png" width="308" height="82" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="82" alt=""></td>
</tr>
<tr>
<td>
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_04.png" width="308" height="27" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_05.png" width="308" height="24" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_06.png" width="292" height="15" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_07.png" width="22" height="120" alt=""></td>
<td rowspan="3">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_08.png" width="80" height="87" alt=""></td>
<td rowspan="3">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_09.png" width="78" height="87" alt=""></td>
<td rowspan="3">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_10.png" width="81" height="87" alt=""></td>
<td rowspan="3">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_11.png" width="31" height="87" alt=""></td>
<td>
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_12.png" width="308" height="31" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="31" alt=""></td>
</tr>
<tr>
<td>
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_13.png" width="308" height="35" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="35" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_14.png" width="308" height="54" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_15.png" width="270" height="33" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="33" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
This is likely because of the way Outlook renders HTML using Microsoft Word, automatically adding whitespace around certain elements.
I always include these lines of CSS to prevent the styling that is applied automatically by email clients.
table {
border-collapse: collapse;
}
img, a img {
border: 0;
outline: none;
text-decoration: none;
}
/* Force Hotmail/Outlook.com to display line heights normally. */
table, td {
mso-table-lspace: 0;
mso-table-rspace: 0;
}
/* Remove spacing between tables in Outlook 2007 and up. */
#outlook a {
padding: 0;
}
Maybe try adding these and see if it helps?
Requirement
I want to create an image with multiple hyperlinks on it and email it to someone.
What I did
I used Photoshop's slicing method and added URL to the slices. I saved the composition for web. For it to work on my recipient's end, I uploaded each slice to an online photo hosting website and edited the HTML tag img src="local photo location" to img src = "online photo location". But the problem is I get multiple white-spaces between each slice which distorts the overall image.
Code
<html>
<head>
<title>General Infosheet July 25</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (General Infosheet July 25.jpg) -->
<table id="Table_01" width="800" height="1034" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="http://facebook.com/">
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_01_zpsgxd25oae.jpg" width="539" height="158" border="0" alt=""></a></td>
<td rowspan="2">
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/StackOverflow-Version_02_zpsmqhre1ll.jpg" width="260" height="452" alt=""></td>
<td>
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="158" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/StackOverflow-Version_03_zpsnfkulzvt.jpg" width="539" height="876" alt=""></td>
<td>
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="294" alt=""></td>
</tr>
<tr>
<td>
<a href="http://twitter.com/">
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_04_zps239b1stn.jpg" width="260" height="144" border="0" alt=""></a></td>
<td>
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="144" alt=""></td>
</tr>
<tr>
<td>
<a href="http://instagram.com/">
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_05_zpsuwqhoawm.jpg" width="260" height="134" border="0" alt=""></a></td>
<td>
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="134" alt=""></td>
</tr>
<tr>
<td>
<a href="http://photobucket.com/">
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_06_zpsiwxkb9ty.jpg" width="260" height="304" border="0" alt=""></a></td>
<td>
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="304" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Question
I want to remove white-space between the images. Please provide code edits that will help to remove these white-space.
Make sure that the padding for each table cell is 0px, and then set the border-spacing property to 0, and the border-collapse property to collapse. Tables by default have spacing, resulting in whitespace.
Answer
I was able to solve this problem by inspecting the body section of the email in Hotmail, and then pasting entire HTML code in the inspector. That way, the code is not interpreted by Outlook, but rather by the web browser engine. So, this might be a resolute solution for anyone trying to email complex HTML code.
I know this is a basic question but I'm having difficultly making my site responsive.
It is a basic page that I've done in Photoshop. I've tried a lot of things to make it responsive with no luck.
Here is my HTML code:
<html>
<head>
<title>newbeebosite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (newbeebosite.psd) -->
<table id="Table_01" width="1601" height="1401" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7">
<img src="images/Home_01.jpg" width="1600" height="21" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="2">
<img src="images/Home_02.jpg" width="1216" height="46" alt=""></td>
<td>
<img src="images/Home_03.jpg" width="192" height="45" alt=""></td>
<td>
<img src="images/Home_04.jpg" width="192" height="45" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="45" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/Home_05.jpg" width="384" height="88" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Home_06.jpg" width="78" height="87" alt=""></td>
<td>
<img src="images/Home_07.jpg" width="251" height="87" alt=""></td>
<td colspan="3">
<img src="images/Home_08.jpg" width="887" height="87" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="87" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/Home_09.jpg" width="971" height="160" alt=""></td>
<td>
<img src="images/Home_10.jpg" width="1" height="160" alt=""></td>
<td colspan="2">
<img src="images/Home_11.jpg" width="436" height="160" alt=""></td>
<td>
<img src="images/Home_12.jpg" width="192" height="160" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="160" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/Home_13.jpg" width="1600" height="1086" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1086" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="78" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="251" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="642" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="244" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="192" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="192" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
As a starter I would add:
<meta name="viewport" content="width=device-width, initial-scale=1">
in the head of your html document.
Explanation
This tells the browsers CSS engine "use the screen width of the device (measured in "device independent pixels") as the basis for your HTML element" - and therefore all "fluidly styled" descendant (child) elements will be affected because their height and width properties are based on their parent elements size.
width=device-width is what instructs the page to match the screen's width in device independent pixels. (as opposed to say width=1024 which would explicitly set the width of the page.)
Now when the browser width changes your CSS rules will be hooked into those changes.
I believe initial-scale=1 establishs a 1:1 relationship between CSS pixels and device independent pixels (If that doesnt make sense dont worry - but I would include it).
Then you need to make the table responsive by removing the fixed width definitions and replacing with width definition that change as the parent containers change size.
There is a good explanation of this here - https://developers.google.com/speed/docs/insights/ConfigureViewport
e.g. like this:
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (newbeebosite.psd) -->
<table id="Table_01" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7">
<img src="http://lorempixel.com/400/200/" width="80%" height="21" alt=""></td>
<td>
<img src="http://lorempixel.com/400/200/" width="80%" height="21" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="2">
<img src="http://lorempixel.com/400/200/" width="80%" height="46" alt=""></td>
<td>
<img src="http://lorempixel.com/400/200/" width="80%" height="45" alt=""></td>
<td>
<img src="http://lorempixel.com/400/200/" width="80%" height="45" alt=""></td>
<td>
<img src="http://lorempixel.com/400/200/" width="80%" height="45" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
Here is a working demo - http://jsbin.com/dilejobofu/1/edit?html,output
I did outlook HTML signature and it's look good and work good, but on mobile it's look pretty big. If it possible to do my signature responsive?
My HTML code:
<html>
<head>
<title>Signature</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Signature4.psd) -->
<table id="Table_01" width="880" height="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="6">
<img src="images/Signature4_01.png" width="880" height="263" alt=""></td>
</tr>
<tr>
<td>
<a href="matt.yesmaniski#themenorahgroup.com">
<img src="images/email.png" width="301" height="37" border="0" alt=""></a></td>
<td>
<img src="images/Signature4_03.png" width="58" height="37" alt=""></td>
<td>
<a href="https://www.facebook.com/pages/Imagine-Built-Homes/109522549076128" target="_blank">
<img src="images/facebook.png" width="28" height="37" border="0" alt=""></a></td>
<td>
<img src="images/Signature4_05.png" width="1" height="37" alt=""></td>
<td>
<a href="https://twitter.com/ImagineBltHomes" target="_blank">
<img src="images/twitter.png" width="28" height="37" border="0" alt=""></a></td>
<td>
<img src="images/Signature4_07.png" width="464" height="37" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
If you try replacing all your fixed widths with percentages, that should adjust to fit the device. For example, make table width 100% instead of 880 etc
Hey I made an image in Photoshop for an email newsletter. I sliced the image and added links to the images I want clicked, but when I send it in an email there are spaces between the images. How can I remove the spaces? Here is the coding.
<html>
<head>
<title>email_template_1</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">
<!-- ImageReady Slices (email_template_1.psd) -->
<table id="Table_01" width="650" height="801" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="8">
<img src="images/ttcc_01.jpg" width="650" height="65" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/ttcc_02.jpg" width="507" height="33" alt=""></td>
<td rowspan="2">
<valign=top align=left width=33><img src="images/ttcc_03.jpg" width="33" height="33" border="0" alt="Blog"></td>
<td rowspan="2">
<img src="images/ttcc_04.jpg" width="10" height="33" border="0" alt="space"></td>
<td>
<valign=top align=left width=33><img src="images/ttcc_05.jpg" width="33" height="32" border="0" alt="Facebook"></td>
<td colspan="2" rowspan="2">
<img src="images/ttcc_06.jpg" width="67" height="33" alt=""></td>
</tr>
<tr>
<td>
<img src="images/ttcc_07.jpg" width="33" height="1" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/ttcc_08.jpg" width="650" height="25" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/ttcc_09.jpg" width="650" height="162" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/ttcc_10.jpg" width="650" height="347" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/ttcc_11.jpg" width="504" height="1" alt=""></td>
<td colspan="6">
<img src="images/ttcc_12.jpg" width="146" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/ttcc_13.jpg" width="324" height="72" alt=""></td>
<td colspan="6"><valign=top align=left width=280><img src="images/ttcc_14.jpg" algin="left" width="280" height="72" border="0" alt="Click Here for more Information!"></td>
<td>
<img src="images/ttcc_15.jpg" align="left" width="46" height="72" border="0" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/ttcc_16.jpg" width="650" height="95" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="324" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="180" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="33" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="33" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="46" height="1" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
and the site
file:///Users/Dad/Dropbox/Apps/site44/ttc.site44.com/ttcc.html
Since your Photoshop is creating tables, and poor ones at that, you have a different issue. I would recommend that you apply the following style to your table:
#Table_01 {
border-collapse: collapse:
}
That should fix the problem.
But if you weren't using tables, you could still have the same issue. This is because the spaces between the images are whitespace. They occur because your server doesn't optimize the HTML output. The reason this is a problem is because images and spaces can both be interpreted as having the CSS property display: inline. (I know some browsers don't do that to images, but when they do, this kind of thing happens.)
The solution I've used is to strip out all whitespace from between tags when it matters. Here's a sample function for doing that.
function stripSpaceBetweenTags(container) {
var rex = />\s+</gm;
var htmlString = $(container).html();
htmlString = htmlString.replace(rex,"><");
$(container).html(htmlString)
}
The container argument is a string that can be used as a valid jQuery selector. What happens is that it strips all cases of whitespace (spaces, tabs, linefeeds, etc.) between tags if there is only whitespace between those tags. This is important: if you have other characters, you don't want them stripped out.
Think of it as an ad hoc optimizer. You don't have to do this to the whole page, and it's probably better if you don't. But if you have a container that holds images which have to be tight, tight, tight, this is a good workaround.