So I've just lost several hours of my life trying to win this battle, with no luck. In summary, I'm trying to fill a table with three 10px images, but GMail is forcing each cell to be 16px. Here's what I am working with:
<table border="0" cellpadding="0" cellspacing="0" width="550" style="height:10px !important">
<tr style="height:10px" height="10">
<td width="10" height="10" style="height:10px !important">
<img src="http://s3.amazonaws.com/meagain/images/templates/letterhead/corner_tl.gif" style="display:inline; padding: 0px; margin:0px" width="10px" height="10px"></td>
<td width="531" height="10" style="height:10px !important; background-color:#FFFFFF;">
<img src="http://s3.amazonaws.com/meagain/images/templates/letterhead/spacer.gif" style="display:inline; padding: 0px; margin:0px" width="10px" height="10px"></td>
<td width="9" height="10" style="height:10px !important">
<img src="http://s3.amazonaws.com/meagain/images/templates/letterhead/corner_tr.gif" style="display:inline; padding: 0px; margin:0px" width="9px" height="10px"></td>
</tr>
</table>
My apologies that there are so many redundant attributes, because I've been trying everything. Basically, I'm trying to make the table exactly 10px high. No matter what, however, GMail makes it 16px high. If I use developer tools to delete all three images straight from the source code, then the table collapses to the 10px. Also, if I delete 2 out of the three images, it still stays 16px. It's almost as if the TD must be 16px if it contains an image, or the image has 3px of padding around it.
Has anyone experienced anything like this? And if so, any ideas? I'm running out of ideas, and sanity..
Like Herbie said, make sure you set the line-height on the TD.
Also make sure you have a font-size set, because gmail might be setting the minimum height of the TD based on a space character in that cell. In general, setting a font-size of 1px in cells where there isn't any text is good practice.
It looks like this is for html email creation, correct? Take a look at this for any other issues - it's helped me out a bunch of times http://www.emailology.org/#1 and http://www.campaignmonitor.com/resources/ for tips.
I can't comment yet, so I'll post as an answer...
16px sounds like a line-height value. Have you tried setting the line-height of each TD to 10px or changing each IMG from inline to inline-block?
I was trying to figure out your solution.
This is the literal solution, put this in your TD tag:
style="line-height:0"
In your <img> tag, you can put this:
style="display:block;"
... or you can make the height to max-height. It should solve your problem.
In html - <img> tag is not a block tag so we need to use following css to let it work like a block tag
style="display:block;"
with this css the your given height will perfectly work on your HTML page.
Try once!
Related
I have an HTML e-mail that is breaking on Outlook 2013. Between every row, there is a white space: Photo
Every image is set to display: block, I have added border-collapse: collapse to the table and page-break-before: always to table rows but nothing had effect...
set the cellpadding, spacing and border to 0
without seeing your code and knowing exactly what you have, below is sample of what I use and usually works in Outlook:
<table align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td style="display:block; border-collapse:collapse;">
<img alt="Sample Image" src="http://placehold.it/230x150.png" width="230" style="display:block;" />
</td>
</tr>
</table>
Outlook ads a default font size of 13px. If you add a style of font-size: 1px and line height of 1px on the and the this might fix it.
This fixed it for me when I ran into this issue.
A pretty hacky way of fixing that is using margin-bottom: -10px; or w.e
Perhaps specifically set the padding/margin to 0px.
I just started learning HTML today and was wondering how to have generic width so it fits the screen perfectly across every screen resolution?
Here is my current code, I tried using percents but code no worky!
<!doctype html>
<html>
<head>
<title>Home</title>
</head>
<body>
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td width="70%">
<a href="">
<img src="Resource/Header.png">
</a>
</td>
</tr>
</table>
</table>
</body>
</html>
If you want your table to span the full width of the screen you should define it like this:
<table align="center" cellspacing="0" cellpadding="0" style="width: 100%;">
...
In general don't use the width attribute but rather the style attribute
Also noted in the comments, it's better to use semantic markup and put your CSS in external files, but if your just starting out, it's probably a good way to get going.
Some other links you might find useful:
https://developer.mozilla.org/en-US/docs/Web/CSS/Tutorials
http://getbootstrap.com/ => Advanced CSS framework (I would advice you to learn the basics first)
It's unclear exactly what you're trying to do. One interpretation is that you're trying to have an image left-aligned inside a box which occupies 70% of the page's width (here showing Resource/Header.png to be 300 pixels wide):
In that case, you need to add two empty columns and fix the table's width to 100% of the page:
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%"></td>
<td width="70%"><img src="Resource/Header.png"></td>
<td width="15%"></td>
</tr>
</table>
Try it on JSFiddle.
It's also a possibility that you want the image to take the whole 100% of the cell—that is, 70% of the page. In that case, you need to fix the width of the image to 100%:
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%"></td>
<td width="70%"><img src="Resource/Header.png" width="100%"></td>
<td width="15%"></td>
</tr>
</table>
Try it on JSFiddle.
…but tables are for tabular data, not for layout.
Fortunately, every result we've achieved up to now is trivial to achieve using CSS. We need a container and an image:
<header> <!-- header is a new tag in HTML 5; use something else if you want -->
<img src="Resources/Header.png">
</header>
Then, you need to style it up with some CSS:
header {
width: 70%;
margin: 0 auto;
}
Try it on JSFiddle.
I think the margin: 0 auto; line requires some explanation. We are using shorthand style, where we first provide the vertical margins and then the horizontal margins. It is equivalent to
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
We don't actually care about the margin-top and margin-bottom; what actually makes it do anything is the margin-left and margin-right. When one of the margins is auto, the browser will use that margin to fill up any extra space. When both are auto, it will evenly distribute the space between them, thus evenly padding out both sides and centering our element.
Now say we want the latter style we achieved with the table. Then we give the img all of the space within that element:
header > img {
width: 100%;
}
Try it on JSFiddle.
Note that we only needed to change the CSS, and none of the HTML needed to change. This is one advantage of using CSS over tables for layout—change the styles in one place, everything that uses those styles is updated. Also note that the code using CSS is shorter, although this isn't always the case.
…but we still aren't accessible.
If you have an image, always add an alt attribute. The alt attribute is supposed to be a replacement for the image if the user agent cannot display the image, or if the user is blind, etc. For your header, whatever text appears would be fine:
<img src="Resources/Header.png" alt="Frank's Flower Shop">
For purely decorative elements, alt="" should be used. (Yes, an empty alt is better than no alt—but only when it is purely decorative.) Refrain from describing what it is—instead, provide content that could adequately replace the image. (e.g., “screenshot” is bad; “the main window contains a toolbar and a content viewing area” is much better.)
But if it's a header, a search engine might put less weight on the alt text of an image than if it were right there. It turns out that there's a trick we can do with CSS to achieve this. First, write out the HTML as it would appear to a search engine or user with a screenreader:
<header>
<h1>Frank's Flowers</h1>
</header>
Then we can put the image as a background on the h1 and dedent the text out of view:
h1 {
width: 300px;
height: 100px;
background: url(Resources/Header.png) no-repeat;
text-indent: -10000px;
}
Ta-da! Unfortunately, it's harder to combine this approach with scaling the image. In newer browsers, you can use background-size, but that was only introduced in CSS 3. For greatest compatibility, you may want to consider using plain text where possible and aligning that over a decorative background or just not scaling it.
I created a short and simple HTML email for a newsletter. Everything displays perfectly on gmail and hotmail. However on Outlook there's some space between the images.
Checking with firebug I can see that my line-height was ignored and the whitespace I'm seeing is actually the line height of my td. Here's a part of my code :
<tr>
<td width="10" height="80" style="line-height:0px; line-height:0; border-right:1px solid #9cc020;"> </td>
<td width="15" height="80" style="line-height:0;" > </td>
<td width="560" height="80" colspan="5" style="line-height:0;">
<img src="http://infos.mycookit.com/img/PL01bis/c1.jpg" alt="avec le code CHAMP" width="560" height="80" style="display:block">
</td>
<td width="10" height="80" style="line-height:0; border-left:1px solid #9cc020;"> </td>
</tr>
I have also tried setting font-size to 0, different ways for setting the line-height (%, em, px). I also removed the unnecessary white space between my tds and my imgs but line-height is just ignored completly. If I change it in firebug it works though. So I know the issue is none other than that.
Is there a way around this?
---edit-----
Oh and I also tried pretty much everything on this thread : Line-height not working in Outlook 2010 for HTML Email
including the weird hack.
Outlook does not use a "real" html renderer, so you're caught in a bad place. It may be that "line-height" does not work at all, or does not work for certain elements.
You can try a variety of alternate techniques. For example, wrap the content within the cell with an additional element, such as a div, span, etc., and give that element padding or margins. Example
<td>
<div style="padding: 10px 0;">[mycontent]</div>
</td>
I am working on e-mail template. Code is something like this :
<table width="702" cellpadding="0" cellspacing="0" align="center" id="template">
<tr>
<td align="left" valign="top">
<img src="/email/new/top_bar.png" width="702" height="11" alt="" border="0">
<img src="/email/new/bottom_bar.png" width="702" height="11" alt="" border="0">
</td>
</tr>
</table>
I always get vertical whitespace between these two images.
I tried using valign, vspace but no luck. How to get rid of it?
You get whitespace because the images are laid out inline (between two rows of lines there is spacing). You can either lay them out as block elements....
img { display:block; }
.. or you can use the vertical-align property to define a different vertical align which should remove the spacing...
img { vertical-align:top; }
http://vidasp.net/media/CSS-vertical-align.gif
BTW, please stop using deprecated attributes (cellpadding, cellspacing, align, border). For each of those attributes there is a CSS alternative which should be used. Also, use some CSS reset code (like Yahoo CSS Reset)...
Strange: This shouldn't be.
Maybe the E-Mail client interprets the line break in between the <img>s as white space.
Try setting them directly next to each other: <img src...><img src...
Your lines are high enough to accommodate text in the default font, which is higher than your 11 pixel images, hence the gap.
You need to make the lines smaller; the simplest way for your example is to shrink the font:
<td style="font-size: 1px;" align="left" valign="top">
Tested in IE 8, Firefox 3.6 and Chrome 6.
As we all know, Outlook 2007 uses the Word 2007 rendering engine, causing endless grief when designing HTML email message. [Insert rant here] In particular, float, margin, and padding are - shall we say? - poorly supported.
To simulate float so that text wraps around an image, apparently we can simply use:
<img src="foo.png" align="right">
The issue is padding/margin. Without padding/margin, the wrapped text butts up against the image which looks goofy. One workaround is to edit the image and add transparent framing that simulates margin.
Does anyone know any other workarounds?
After reading Microsoft's documentation on Outlook 2007 support, I found that using hspace on an image will work to create white space around it similar to padding.
[ img src="image.jpg" align="left" border="0" hspace="10" ]
That will give you the equivalent of 10px of padding. Works pretty well across email clients.
Figured I'd share in case someone else Googling the issue stumbles across this question like I did.
I have tried it this morning and sadly borders on images arnt supported, however, you can implement the concept on the text area :).
border-left: 7px solid #fff;
for example, inside a white container would give the visual effect of left padding....
One place that padding is supported in Outlook '07 is <td> tags. So I have solved this by wrapping the image in a table:
<table cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td valign="top" style="padding: 0px 10px 0 0;">
<img src="http://www.mysite.com/images/myimage.jpg" style="width:60px; height:100px;" border="0" />
</td>
</tr>
</tbody>
</table>
<p>The text I want to see wrap...</p>
</td>
</tr>
</tbody>
</table>
Note the align="left" is on the parent table as well as the one immediately holding the image. This hack is needed for Outlook 2013. Everything else looked great without it on Litmus.
Adding padding around in image for Outlook and all other email clients.
I found that this works.
img {
padding-left: 25px!important;
padding-top: 25px!important;
padding-bottom: 25px!important;
padding-right: 25px!important;
}
I know this thread is old, but an alternative would be to give the image a solid border the same colour as the container.
If you add a inline style to the img tag with a margin command like this:
<img src="foo.png" align="right" style="margin:5px;">
I'm guessing that is what you're trying to do.