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.
Related
I'm trying to make an email footer from a specific background design but using only inline HTML without using CSS styles. Found a solution that You can edit the .htm file used by Outlook in this case (located in C:\Users[user]\AppData\Roaming\Microsoft\Signatures) and paste other code. Background image is made in CS6 Photoshop where email/phone information is changed there and exported. The design cannot be changed cause it has been accepted from above so I have to work with this what I got... Above image contains 4 icons to proper social media which have to be links. On the other hand, it has to be sizeable if You see a message for example on phone.
I tried:
to chop every image and place them properly on one table with background-image from url using tr/td and using margin/padding=0 but while it looks ok on Outlook when I send it to for example Gmail it completely shatters...
making one image with the above options as well and adding colspan/rowspan to merge cells for example 3x6 table where:
** first column is rowspan="3" corresponding to this vertical line in an image where basic informations are provided [part: 1]
** upper part as colspan="6" to make one big space with information values [part: 2]
** middle part is 5 times <a href="[link]" for clickable icons [part: 3-6]
** below part used once more colspan="6" to make big space with secondary information values [part: 7]
Image with marked parts.
Image_parts
Footer should looks like this:
Footer_One_Image
Code which I tried to use for above image:
<!DOCTYPE html>
<html>
<head>
<style>
th, td {
border: 1px solid black;
}
table {
background: url("https://i.postimg.cc/xCr58mYc/przyk-adowa-stopka.jpg") no-repeat;
width: 1200px;
height: 400px;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="4" width="332"></td>
<td colspan="6" height="250"></td>
</tr>
<tr>
<td width="10">
</td>
<td width="63" height="50">
</td>
<td width="63" height="50">
<a href="https://www.youtube.com/">
</td>
<td width="80" height="50">
</td>
<td width="63" height="50"></td>
<td colspan="2" height="50"></td>
</tr>
<tr>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
Also I tried using this one which chopped images generated from photoshop as a .htm file (I deleted links) but when placed in outlook looks fine - while I send it to any other mail webservice it collapses.
<html>
<head>
<title>stopka 1</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 (stopka 1.psd) -->
<table id="Tabela_01" width="1200" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="3">
<img src="" width="339" height="400" alt=""></td>
<td colspan="4">
<img src="" width="861" height="250" alt=""></td>
</tr>
<tr>
<td>
<a href="">
<img src="" width="86" height="78" border="0" alt=""></a></td>
<td>
<a href="">
<img src="" width="67" height="78" border="0" alt=""></a></td>
<td>
<a href="">
<img src="" width="89" height="78" border="0" alt=""></a></td>
<td>
<a href="">
<img src="" width="619" height="78" border="0" alt=""></a></td>
</tr>
<tr>
<td colspan="4">
<img src="" width="861" height="72" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
How I can manage to write this where I'm kinda pretty much failing. Thank You for any advice/information. Have a nice day.
img {
width: 100%;
display: block;
resize: both;
}
<html>
<head>
<title>Untitled-1</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 (Untitled-1) -->
<table id="Table_01" width="600" height="901" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<img src="images/test_01.jpg" width="600" height="226" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/test_02.jpg" width="309" height="228" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/test_03.jpg" width="291" height="290" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/test_04.jpg" width="309" height="62" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/test_05.jpg" width="216" height="384" alt=""></td>
<td colspan="2">
<img src="images/test_06.jpg" width="186" height="34" alt=""></td>
<td rowspan="2">
<img src="images/test_07.jpg" width="198" height="384" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/test_08.jpg" width="186" height="350" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="216" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="93" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="93" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="198" height="1" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
I can't actually make the tables images fit my screen.
I tried to add a div but doesn't work
Trying to centre my table with fit width and height proportion
the width and height of my image is so big that is why im having a hard time doing a resize for the table itself to fit my screen. :( do i need to redo my design jpeg? I just literally put here one of the columns but it has many columns on it.
Everything gets screwed with my code.
I'm a beginner here. need your help.
I suggest changing the image resolution, and making it width="2250" height="1010" or even better width="1125" height="505"
Hope this works!
Or instead, you could use CSS to style the size:
img {
width: 25%
height: 25%
}
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
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
I haven't had to send any mailshots for a number of years and I remember the process to be very painful then.
I have cut up my design into three sections and placed them within a table the table has a height and width defined and so do all the individual elements, however when viewed in an email client such as Gmail there are spaces between the three table rows.
My html. I think you'll agree it couldn't be more simplified!
<table border="0" cellpadding="0" cellspacing="0" width="550" height="550">
<tr>
<td colspan="2" bgcolor="#ffffff" width="550" height="104">
<img src="images/OC_01.gif" alt="" width="550" height="104"></td>
</tr><tr>
<td bgcolor="#ffffff" width="246" height="341">
<img src="images/OC_02.gif" alt="" width="246" height="341"></td>
<td bgcolor="#ffffff" width="304" height="341">
<img src="images/OC_03.gif" alt="" width="304" height="341"></td>
</tr><tr>
<td colspan="2" bgcolor="#014280" width="550" height="105" valign="top">
<img src="images/OC_04.gif" alt="" width="550" height="105"></td>
</tr>
</table>
Is there anyone here today that has enough email html experience to point me in the right direction?
Edit to add: I have been dissecting some commercial emails that have been sent to me in the past and I have found that some of them also have this weird spacing issue in Gmail. I have also noticed that each has been designed in such a way as to accommodate any extra spacing between the rows so I'm going to assume that the answer to this question is to ensure that the design is produced in such a way that these gaps are not an issue.
You must include style="display:block" with all images to prevent the gap issue in various email clients.
Example:
<img src="http://www.website.com/images/kitty.jpg" alt="Picture of Kitty"
width="1000" height="1000"
style="border:none; margin:0px; padding:0px; **display:block;**"/>
Add following attribute to the IMG element:
style="display: block;"
I've added it for you http://jsfiddle.net/xE9Qr/
Default IMG display is inline-block which produces unwanted space after.
I've tested it using http://ctrlq.org/html-mail/ and the spaces between TR elements are gone now. Remeber to see the result you have to send HTML table layout email to your gMail account.
Adding align="top" to images seems to be a potential fix:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#ffffff">
<img src="images/OC_01.gif" alt="" width="550" height="104" align="top"/>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" width="246">
<img src="images/OC_02.gif" alt="" width="246" height="341" align="top" />
</td>
<td>
<img src="images/OC_03.gif" alt="" width="304" height="341" align="top" />
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#014280">
<img src="images/OC_04.gif" alt="" width="550" height="105" align="top" /></td>
</tr>
</table>