I have made an HTML-Newsletter Template. I have one Bug. How can i adjust images in table layouts? I have tried to to use margin but that wont work on Outlook 2010.
Here ist the Code-Snipet from the image: `
<table id="logo" cellpadding="20" cellspacing="0" width="620" align="center">
<td width="161" height="24" align="left" valign="top">
<a title="www.xxx.xxx besuchen" href="http://www.xxx.xxx/" target="_blank"><img src="http://www.xxx.xxx/images/header/logo_sub.gif" border="0" alt="www.xxx.xxx besuchen" style="margin-left:-13px !important;"/></a>
</td>
</table>`
Try adding columns and rows to the table. Stick the image in one of the middle columns and apply widths and heights to the surrounding columns to get the image into place.
Related
I have created a header for our companies email templates, luckily I was able to find a basic template on the web and tweak it to our requirements.
I am a real beginner when it comes to HTML so I am sure there are many errors in it too.
I need to figure out how to reduce the blue banner to 42px in height but everything I try ruins it. I have also been told that my 600 wide option is very old school and it should be 1200. I have tried to change this too, but then it loses all of the other formatting and looks terrible.
Its supposed to be responsive, if anyone could make any edit suggestions I would be very grateful.
header.txt
header.html
try changing the padding in the td containing the logo/image. To decrease the height of the blue banner, decrease the padiing at top and bottom of the above mentioned table data.
This helps you but another way is to decrease the logos height.
From looking at the codes, there is no specific "height" that is being assigned to the table containers that you can change to specify to 42px. The most that you can do is to remove the "top" and "bottom" padding from the containers inside to make the header's height smaller.
Here's a sample code with the changes. If you notice, I changed the top and bottom padding to 0px. For the second td, I left 5px for the top padding to add some spaces between the logos and the top edge of the screen. If you want to edit the width, I change the width to 800px but you also need to adjust the widths of the 2 containers inside the table. For example, I changed them from 270px to 370px each.
Lastly, I agree that this "template" that you found seems very complex and it would be better to learn a little bit of basic html and css and what you're trying to do is simple and can be done with much simpler codes. Good luck!
<center>
<table cellspacing="0" cellpadding="0" width="800" class="w320">
<tr>
<td valign="top" width="370" style="background:#2980B9;padding:0px 15px 0px 15px;">
<a href="https://www.hayley-group.co.uk/" style="text-decoration:none;">
<img src="http://hosted.hayley-group.co.uk/shop/hayley_web_logo_white(trans).png" width="110" height="auto" alt="Hayley Group PLC Logo"/>
</a>
</td>
<td valign="top" width="370" style="background:#2980B9;padding:5px 15px 0px 15px">
<table border="0" cellpadding="0" cellspacing="0" class="mobile-center-block" align="right">
<tr>
<td align="right">
<a href="https://www.facebook.com/HayleyGroup/">
<img src="http://hosted.hayley-group.co.uk/shop/social_facebook.png" width="30" height="30" alt="social icon"/>
</a>
</td>
<td align="right" style="padding-left:5px">
<a href="https://twitter.com/HayleyGroup">
<img src="http://hosted.hayley-group.co.uk/shop/social_twitter.png" width="30" height="30" alt="social icon"/>
</a>
</td>
<td align="right" style="padding-left:5px">
<a href="https://www.linkedin.com/company/hayley-group">
<img src="http://hosted.hayley-group.co.uk/shop/social_linkedin.png" width="30" height="30" alt="social icon"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
The structure of my table is
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="404">
<img src="assets/Hero-Image2.png" width="404" height="192" style="width:404px;height:192px;border:0;margin:0;outline:0;"/>
</td>
<td width="396" bgcolor="#00188F">
<h1 style="color:#FFF;font-family:Segoe,Tahoma,Verdana,Arial,sans-serif;font-size:16pt;font-weight:100; margin-bottom:10px;">Simpilfied IT management for any enterprise</h1>
<h2 style="color:#FFF;font-family:Segoe,Tahoma,Verdana,Arial,sans-serif;font-size:14pt;font-weight:100;">Gain control over any hybrid cloud with our cost-effective all-in-one cloud solution</h2>
</td>
</tr>
</table>
aand I want the image inside the first cell to have the same height as the second cell (so that the image blends into the background color of it. I know there are alternative ways of doing this, but I'm constrained since this is an HTML email for Outlook).
Right now the right cell is always having a height of 196px, even if I strip its contents to nothing:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="404">
<img src="assets/Hero-Image2.png" width="404" height="192" style="width:404px;height:192px;border:0;margin:0;outline:0;"/>
</td>
<td width="396" bgcolor="#00188F">
</td>
</tr>
</table>
The right cell is always 196px and this causes the left cell to be the same height. Makes no sense.
If you add a display: block to the style of your image it will be fixed.
<img src="//placehold.it/404x192" style="width:404px; height:192px; display: block" />
The first answer should help you to understand why
EDIT: Actually, you dont need nothing but the display block and the image sizes.
What are the dimensions of your image?
I don't think HTML is "smart" enough to stretch your image to fit to your exact request.
Maybe you should try resizing your image in paint/photoshop to a dimension that has the same height/width ratio as 404:192 and see if that helps.
I've been screwing around with this for almost 2 hours and still can't get it to render the right way in Microsoft Outlook.
It was enough of a pain to get it to render in Internet Explorer, but I got it:
Still, here's how it looks as an HTML email in Outlook:
Don't worry about the line break for now; the problems I need to fix are
(1) The 1 pixel of white vertical space between the left piece and center piece
(2) The center piece having pixel more height than the left and right pieces
Here's the HTML:
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td align="left" width="6" height="35">
<img src="images/left-button-corner.png" style="display:block;"/>
</td>
<td align="left" valign="center" bgcolor="#0a9fda" style="padding: 0 10px;" width="220" height="35">
CLICK HERE TO LEARN MORE
</td>
<td align="left" width="6">
<img src="images/right-button-corner.png" style="display:block;" height="35"/>
</td>
</tr>
</table>
If I can't get it, I'm going to give up and use a single image. Any input much appreciated!
In regard to the height issue.
The height of the middle td is the content height (in this case it is line-height) + padding-top + padding-bottom.
You can remove padding declaration and valign and width attributes to make text vertically aligned to the middle and your button will be scaling horizontally (no breaks). I assume that would be good choice, considering you coded fixed height value of 35px.
Example of the middle <td>:
<td align="center" bgcolor="#0a9fda" style="height: 35px;" height="35">
<a href="http://example.com" style="color: #FFF; font-size: 14px;
font-family: Arial; text-decoration: none;">
CLICK HERE TO LEARN MORE</a>
</td>
Additional Notes
You can control how the call-to-action text should break by using entity. For example CLICK HERE TO LEARN MORE will break after "HERE" if the td width is insufficient to fit the text in one line.
Images should have border: none inline style to prevent uncontrolled gaps.
Also note, that valign attribute value center is incorrect. It can have values of top, bottom, or middle which is default.
There are more issues with your code.
Validate your code with some tool, for example http://validator.w3.org/.
I would try the following.
Try align="right" on the left button image:
<td align="right" width="6" height="35">
<img src="images/left-button-corner.png" style="display:block;"/>
</td>
Please help, I'm at my wits end as I'm trying to make a responsive email, going from two columns to a single one, everything goes perfect until I reach Outlook2013, it adds a single black line to the right of each table that is aligned next to each other.
I've tried to reset it with the border-collapse:collapse function, but it's not having any effect.
I basically have two tables left aligned in a tablecell.
<tr>
<td align="left" style="border-collapse:collapse"><table width="300" border="0" style="border-collapse:collapse" cellspacing="0" cellpadding="0" class="contenttable" align="left">
<tr>
<td align="left" class="headercell" height="399" width="300" style="line-height:399px"><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="image" style="display:block; width:100% height:auto" alt="" border="0px" height="399" width="300" /></p></td>
</table> <table width="300" border="0" cellspacing="0" cellpadding="0" class="contenttable" style=" border-collapse:collapse" align="left">
<tr>
<td align="left" class="headercell"><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="image" style="display:block; width:100% height:auto" alt="" /></p></td>
</table></td>
</tr>
Usually I find that the colour of the mystery border is the same as the background-color on the body element. EG if you have a green background with white content areas, the lines will be green on white.
To fix it in this case you can set the body background to be white and that will fix it. The gaps are still there, but you can't see them. You would then apply the green background colour to a container table instead.
Yeah. That's Outlook showing the 1px gaps/borders it keeps between floated tables. You cannot get rid of it. Kinda. You can recolor it though.
For the little 1px gaps/lines you need to add:
border: 1px solid #COLOR;
to every floated table being sure to adjust the width of your tables to avoid "float drop". Where #COLOR is the background color of your tables.
If you're having problems with BIG gaps you need to put this in your head in a style tag:
table {mso-table-lspace:0pt;mso-table-rspace:0pt; border-collapse:collapse;}
I hate to admit this: I'm building a complicated, but gmail-friendly HTML email blast (inline styling). Anyway, it's a game of tables and split images, and I've seemed to have forgotten all my 1995 table mojo.
http://www.highgatecross.com/development/tables/
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="skyline.jpg" alt=""></td>
<td><img src="skyline-02.jpg" alt=""></td>
<td><img src="skyline-03.jpg" alt=""></td>
</tr>
<tr>
<td colspan="3"><img src="skyline-04.jpg" alt=""></td>
</tr>
</table>
I have a mystery 4-pixel "padding" below each images (the DOM panel in Firebug shows a cell "clientHeight" 4 pixels greater than my images).
I have tried every combination of deprecated HTML styling (heights, etc.) and CSS and no joy.
So, simply, how do I rid the 4 pixels and close the gap between rows?
Just use style="display: block" on the image.
Problem solved.
I should have checked StackOverflow first!
Either:
<img src="some.jpg" style="display: block" />
or
<img src="some.jpg" style="vertical-align: bottom" />
will eliminate the 4 pixels under the image in a table cell.
I fiddled around with a number of properties and it appears that setting line-height: 0 removes the gap.
Another way to fix is to add font-size: 0 on the td.