I am trying to create a HTML Email signature where I place 2 images side by side.
Here is the html code I am using:
https://codepen.io/klodoma/pen/mdeQYrB
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
body{
background-color: white;
margin: 0;
}
img { display: block;}
.row {
white-space: nowrap;
display: flex;
}
</style>
</head>
<body>
<div class="row" style="white-space:nowrap;">
<img src="https://i.postimg.cc/DyCPXxdQ/hair-left.png" alt="Left Image"/>
<img src="https://i.postimg.cc/Mpvbb1dC/hair-right.png" alt="Right Image"/>
</div>
<table border="0" cellspacing="0" cellpadding="0" style="padding:0; margin:0;">
<tr>
<td><img src="https://i.postimg.cc/DyCPXxdQ/hair-left.png" alt="Left Image"/></td>
<td><img src="https://i.postimg.cc/Mpvbb1dC/hair-right.png" alt="Right Image"/></td>
</tr>
</table>
</body>
</html>
I tried:
creating a DIV
creating a TABLE
In Html both look very good, but when I paste this code in an email client (Outlook for example) there are some problems.
If the width of the emails page is not enough, then the div shifts the images(even though word-wrap is disabled).
In the table version there is a vertical space I couldn't get rid of.
Any ideas to solve this? I don't care which solution will work, divs or tables.
There are a few aspects here:
Outlook only reads the height and width numerical values (and if they're outside of the style tag too I think). Here you can see below I've added redundancy to my approach.
<img src="https://imageurl....." alt="alt-text" height="48" width="48" style="display: block; width: 48px; height: 48px;" />
You may also find it helpful to set the width of your initial table at the same point where you have applied the margin and padding resets.
To remove any unwanted vertical space you should also reset the padding to 0 in the <td> elements I believe.
Related
I have tried EVERYTHING I could find. The famous 1px vertical gap on the right side of images still doesn't seem to have a solid fix! Please someone help to to resolve this. I literally have no hair left after pulling them out one by one!
Plesae can someone help?
<style type="text/css">
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body{
margin:0;
padding:0;
}
img{
border:0 none;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
}
a img{
border:0 none;
}
.imageFix{
display:block;
}
table, tr, td{
border-collapse:collapse;
}
#bodyTable{
height:100% !important;
margin:0;
padding:0;
width:799px !important;
max-width: 799px !important;
}
</style>
<table bgcolor="red" width="799" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="176" height="115">
<img src="https://www.htref.co.za/signatures/images/img01-01.png" class="imageFix" alt="logo" width="176" height="115">
</td>
<td width="623" height="115">
<img src="https://www.htref.co.za/signatures/images/img01.png" class="imageFix" alt="logo" width="623" height="115">
</td>
</tr>
</tbody>
</table>
Example show of 1px vertical gap on the right side of the image
bgcolor="red"
Is it necessary? Without this the gap disappeared.
On my computer, no border appear !
Put a lightgrey background-color to body, anything at the right of the image.
Why using a table when you can do this with Flexbox, for example ?
Have you tried not put any white space before or after your images? I kind of remember that whitespace in your source code HTML is collapsed but still rendered as a space character in the output. So no space, tab or newline character before or after your img tag.
But if this is all you signature has, you don't need a table (which is a very 90s way to align pictures). You could use directly your imgs (but still without whitespace before or after your tags):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
width: 799px
}
</style>
</head>
<body><img src="https://www.htref.co.za/signatures/images/img01-01.png"
alt="logo" width="176" height="115"
/><img src="https://www.htref.co.za/signatures/images/img01.png"
alt="logo" width="623" height="115"
/></body>
</html>
I was given some sliced images to put together in an html. I did not slice them myself. I built a table. For each row, I placed 4 images with borders that need to be aligned. The final html should look like a grid with the borders of all the images aligned correctly. However, I noticed that in a specific row, the 4 original images do have the same dimensions. Eg.
I've tried changing the width and the height of all the images, no margin/padding in the table and the cells. But, the borders are not aligned horizontally and vercally. Here's an example of one of the rows with original dimensions of the images. I know that some of the rules might be redundant but I was just trying everything without finding a solution.
Thank you for your quick feedback.
<html>
<head>
<meta charset="utf-8">
<title>No name</title><style type="text/css">
img {vertical-align: top; margin:0 auto 0 auto; padding:0}
table, td {border:0; padding:0; margin:0; border-collapse: collapse; cellpadding:0; cellspacing:0;}
</style>
</head>
<body>
<pre width="" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
<tr>
<td id="imgA"><img src="ImageA" width="187" height="127" alt=""/></td>
<td id="imgB"><img src="ImageB" width="184" height="127" alt=""/></td>
<td id="imgC"><img src="ImageC" width="182" height="126" alt=""/></td>
<td id="imgD"><img src="ImageD" width="187" height="126" alt=""/></td>
</tr>
</pre>
</body>
</html>
you can try this :
table, td img
{
width :100%;
height:100%
}
Apply border in img class
This fantastic article describes how to create responsive tables which scale fabulously to mobile browsers.
Now I'm trying to apply the same technique to html emails but display:block just won't seem to work in html emails.
To reproduce the issue:
Save the following code as an HTML page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#media only screen and (max-width: 760px), screen and (max-device-width: 480px) {
/* Force table to not be like tables anymore */
table, td, tbody, tr{
display: block;
width:100%;
padding:0;
clear:both;
}
td {
/* Behave like a "row" */
position: relative !important;
}
}
</style>
</head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid red;">1/1</td>
<td style="border:1px solid red;">1/2</td>
<td style="border:1px solid red;">1/3</td>
</tr>
<tr>
<td style="border:1px solid red;">2/1</td>
<td style="border:1px solid red;">2/2</td>
<td style="border:1px solid red;">2/3</td>
</tr>
</table>
</body>
</html>
Open the page in Safari
Resize the window to note how the table changes with a smaller window-size
Press CMD+i or File->Mail Contents of this page to create a HTML email
Resize the email window to note how the table still resizes correctly
Send the email to yourself and open it.
Now notice how the email indeed responds to the media query but unsuccessfully restyles the table.
I have yet to find an email client that actually displays the table correctly. Is this a dead-end or do you have ideas of workarounds?
The accepted answer provides some great info but it doesn't address the question directly. I've been experimenting with responsive emails recently and have come up with some good solutions others might find useful. Here we go...
To answer the question, you can use display:block; to make table columns behave as rows on some mobile devices (Android, iOS and Kindle).
Here's an example showing how you would make a 2 column layout stack (left columns on top of right column) on mobile devices.
HTML
<table class="deviceWidth" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
<tr>
<td width="50%" align="right" class="full">
<p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;">
<img src="http://placehold.it/440x440&text=LEFT" alt="" border="0" style="display: block; width:100%; height:auto;" />
</p>
</td>
<td width="50%" align="left" class="full">
<img src="http://placehold.it/440x440&text=RIGHT" alt="" border="0" style="display: block; width:100%; height:auto;" />
</td>
</tr>
</table>
CSS
#media only screen and (max-width: 640px) {
body[yahoo] .deviceWidth {width:440px!important; } T
body[yahoo] .full {
display:block;
width:100%;
}
}
Note: The body[yahoo] selector prevents Yahoo from rendering the media queries. The body element of my email has a yahoo="fix" attribute.
The above CSS says that if the screen is less than 640px in width then the tds with a class of full should display:block with width:100%.
Now, let's get a bit fancier. Sometimes you'll want the column on the left to stack BELOW the column on the right. To do this we can use dir="rtl" on the containing table to flip the order of the columns. The CSS stays the same, here's the new HTML:
HTML
<table class="deviceWidth" dir="rtl" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
<tr>
<td width="50%" dir="ltr" align="right" class="full">
<p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;">
<img src="http://placehold.it/440x440&text=RIGHT" alt="" border="0" style="display: block; width:100%; height:auto;" />
</p>
</td>
<td width="50%" dir="ltr" align="left" class="full">
<img src="http://placehold.it/440x440&text=LEFT" alt="" border="0" style="display: block; width:100%; height:auto;" />
</td>
</tr>
</table>
By adding the dir="rtl" we're telling it to reverse the order of the columns. The first column (in the flow of the HTML) is being displayed on the right, the second column (in the HTML) on the left. For screens smaller than 640px it displays the first column (the column on the right) first, and the second column (the column on the left) second.
Here's the full HTML and CSS and a screenshots from Gmail and iOS 5 are attached.
I suggest you refer to this: http://www.campaignmonitor.com/css/
While not very up to date, it's a great resource in terms of css support for emails. Unfortunately when building email templates you need to consider not only browsers, but different clients e.g. Outlook and the css support they offer is notoriously poor.
On top of that, mail providers like gmail tend to strip certain parts of your document (e.g. the head tag) so it becomes really difficult to apply any responsive design concepts to an audience (the email clients) that has very poor support for even basic css.
I was able to make it work, here is the result:
https://litmus.com/pub/d9ac198
Here is a code I use to force td to behave like rows:
table[class="magic"],
table[class="magic"] tbody,
table[class="magic"] tr,
table[class="magic"] td {
display: block !important;
width: 100%;
}
Another approach is to work with 2 designs in one e-mail: one for desktop readers, and one for mobile readers, as demosntrated here.
I'm having the exact same issue! I thought it would just work on Mail on iOS devices, but it happens exactly what you're saying - it works until you actually send it.
#Luca, we know support isn't great, but media queries are ignored by most so it's a nice touch to add if you want the email to look a bit better on modern email clients. Outlook and others would still get the 'normal' HTML email, without the media queries/responsive tables.
I have found that using media queries to stack td elements for mobile devices like this
td[class="stack-content"] {display:block !important}
seems to work for most devices with the exception of windows phone 7 which apparently does not support the display: block property.
I am trying to put two images side by side inside a <td> (also tried one <td> for each img), but has some white spaces between the images, and do not understand where they come .. I can solve my problem using float, but I'm trying to avoid this. If someone can explain to me why this happens. I took some tips from other questions, but it doesn't work.
Here is my code:
<html>
<head>
<style "text/css">
td, tr, img { padding: 0px; margin: 0px; border: none; }
table { border-collapse: collapse;}
</style>
</head>
<body style="background: black;">
<center>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img alt="" title="" src="http://i.min.us/ijCTdY.jpg" />
</td>
</tr>
<tr>
<td>
<img alt="" title="" src="http://i.min.us/jj7Yt6.jpg"/>
<img alt="" title="" src="http://i.min.us/ijCo96.jpg"/>
</td>
</tr>
</table>
</center>
</body>
you can notice that the top image has 800 px height, and the other ones has 400px each one, what I need is some kinda square, without any spaces between the images.
imgs are inline elements. The horizontal space between the images is coming from the whitespace between the images in the HTML. The same reason that there's a space between the characters here.
So, to fix that, remove the whitespace: http://jsfiddle.net/xMW7N/2/
The vertical space is also because the images are inline elements. The gap is the space reserved for descenders in letters like g and j.
To fix that, set vertical-align: top on img: http://jsfiddle.net/xMW7N/3/
Although in your case (as mentioned in your question), setting float: left works just fine: http://jsfiddle.net/xMW7N/4/
That works because float: left forces display: block, so all of the problems caused by the images being inline are resolved.
It's the whitespace in your markup itself. If you remove the line-break and the spaces between the two images, the space will go away.
The whitespace is treated as text, as a single space character.
This is easier done without tables: http://jsfiddle.net/feSxA/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background: black;
}
.imgHolder {
width: 800px;
margin: auto;
}
.imgHolder img {
float: left;
}
</style>
</head>
<body>
<div class="imgHolder">
<img alt="" title="" src="http://i.min.us/ijCTdY.jpg" />
<img alt="" title="" src="http://i.min.us/jj7Yt6.jpg" />
<img alt="" title="" src="http://i.min.us/ijCo96.jpg" />
</div>
</body>
</html>
try adding a border="0" in your table element
Add display: block; to your images.
This will remove any gaps caused by the image being inline but you may need to split the cells up to allow them to sit side by side.
You can also remove the whitespace which should get rid of the whitespace.
I have a rich HTML email. I was wondering how, in Outlook 2010 and 2007, you get the table in the layout to sit flush with the edge of the browser?
Have a look at this pic:
The pink is the background color of the body tag and the grey is the bg of the table. They both have 0 everything (margin, paddting ect). But there is still some space. The pink should not be visible.
Does anyone know how to get rid of this space on the body?
Also here’s some CSS for the start of the email:
<html>
<head>
<style type="text/css">
html, body{ width:100%; }
body{ background-color:#ff00ff; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body topmargin="0" style="margin:0; padding:0; width:100%; background-color:#ff00ff;" >
<table topmargin="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;border-spacing: 0;border: 0; margin:0; padding:0; background-color:#eee;" >
Cheers!
Outlook 2007/2010 adds 15px top/bottom and 10px left/right body padding to all html emails. You can't get rid of it.
Here's a trick to fake full backgrounds: http://www.campaignmonitor.com/forums/viewtopic.php?pid=17048
Outlook uses the broken Microsoft Word HTML engine and is not based on any reasonable resemblance to a browser.
If you have Word, you can at least open your email as html and see how it renders it without having to go through the whole mail cycle.
Outlook really in the bane of any email marketer. It is an absolute pile of crap and fails to support even the most basic CSS expectations.
I'd have to have many frank and disappointing discussions with graphic designers over the limitations of email as a platform due to Outlook. Microsoft has seriously made a step backwards in using the Word engine for Outlook.
Stange that the <body style="padding:0px; margin:0px;"> doesn't work.
I find that with outlook 2007/2010 that if you have padding-top applied to a column but not the other columns in the same row Outlook will apply that padding to all the columns for some reason. Are you able to paste more of the email code so we can have a look that its not something else causing the issue.
Try using margintop="0" marginleft="0" marginright="0" on the <body> tag (updated to full example):
<html>
<head>
<title>Title Tag</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body margintop="0" marginleft="0" marginright="0" bgcolor="#ff00ff">
<table width="100%" cellmargin="0" cellspacing="0" border="0"><tr><td width="100%">
<table width="600" cellpadding="0" cellspacing="0" bgcolor="#ffffff"><tr><td width="600">
</td></tr></table>
</td></tr></table>
</body>
</html>
You will need to set the width of 600 to whatever the width of your email is.
There are cross-email client bugs with body tags, and padding/margin values in CSS.
NB - this is only necessary, and only works, on the body tag.
With pure CSS (I'm not sure the makers of IE like reading that), you can use !important to force the margin and padding of the <table> and the <body> to be 0px:
html, body
{
margin: 0px !important;
padding: 0px !important;
}
table
{
margin: 0px !important;
}
Maybe it'll work, but maybe not. I'm not sure how Outlook handles CSS...
As outlook doesn't support margin -reference. My work around to this issue was as below. Hope it will help someone.
<table cellpadding="0" cellspacing="0" border="0" style="width:100% !important; margin:0; padding:0; background-color:#ffffff; line-height: 100% !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<!-- SECTION:TOP -->
<tr style="margin:0; padding:0; border:0;">
<td>
<img src="/assets/images/10049-2013-Email_03.gif" alt="" height="104" width="145" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_04.gif" alt="" height="104" width="261" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_05.gif" alt="" height="104" width="144" border="0"style="display:block;" />
</td>
</tr>
<tr style="margin:0; padding:0; border:0;">
<td>
<img src="/assets/images/10049-2013-Email_06.gif" alt="" height="104" width="145" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_07.gif" alt="" height="104" width="261" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_08.gif" alt="" height="104" width="144" border="0"style="display:block;" />
</td>
</tr>
I know this is a bit late, but I came across this post and thought you might be able to test this method as well.
http://theboywhocriedfox.com/code-snippets/fixing-the-forced-body-padding-in-outlook-2007-2010-and-2013/
"Fixing the forced body padding in Outlook 2007, 2010 and 2013
Testing a html email recently with a high percentage of recipients
likely to be users of Microsoft Outlook I came across a bug where it’s
not possible to overwrite the forced body padding in versions of
outlook (which use MS Words rendering engine 2007, 2010, 2013).
This was breaking the design and causing unwanted whitespace on the
left margin of the email. The offending versions of outlook support
margin (including negative margin) but only support inline styles. So
the fix/hack is to wrap the entire email in a wrapper table and apply
negative margin to just the problematic email clients – using html ‘if
statements’ as below."
<!--[if !gte mso 9]><!---->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!--<![endif]-->
<!--[if gte mso 9]>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-left:-10px;">
<tr>
<td>
<![endif]-->
<!-- YOUR CONTENT HERE -->
</td>
</tr>
</table>