I have a single table HTML with 3 columns (25px : 580px : 25px) with white background throughout table, trs and tds. All works in every browser except Outlook 2010.
In Outlook 2010 I am receiving vertical gaps in the two outer columns between table rows - its about a 3px gap. It appears the background white is either not displaying throughout the cell or Outlook is adding in a line break or similar.
Screenshot here:
The structure of the affected rows is as:
<tr><td height="20" width="25" align="left" valign="top" bgcolor="#ffffff"></td>
<td height="20" width="580" align="left" valign="top" bgcolor="#ffffff"></td>
<td height="20" width="25" align="left" valign="top" bgcolor="#ffffff"></td>
</tr>
Anyone any ideas what causes this and how to resolve?
Possible solutions:
Set background-color: #ffffff with CSS
Add a in the affected tds and use CSS to set font-size: 0px and line-height: 0px
Try both of the above at the same time :)
Images should be set to inline display:block
Add into your embedded CSS:
table, table td { border:0; border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; margin:0; padding:0; }`
You should put your bgcolors in the tag instead of table-cells:
<table bgcolor="#ededed" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table bgcolor="#ffffff"cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="20" width="25" align="left" valign="top"></td>
<td height="20" width="580" align="left" valign="top"></td>
<td height="20" width="25" align="left" valign="top" ></td>
</tr>
</table>
</td>
</tr>
</table>
Related
I'm having an issue aligning text and an image link next to each other in a table row. The image keeps drifting up and down. I've tried various align middle and display block styles with no luck. I am limited to only having CSS inline and trying to display properly across different devices and desktop email clients. The posted code is a nested table that I can not get the elements to align with each other. Viewing the code in the browser, for the most part, displays correctly. But once the code is in Outlook and other programs the image drifts within the row.
image example
<table cellspacing="0" cellpadding="0">
<td height="100%" align="left">
555-555-5555 |
</td>
<td height="100%" align="left">
stackoverflow.com |
</td>
<td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;">
<img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px" alt="Stack Overflow LinkedIn" width="11" height="11">
</td>
</table>
This is very simple and when tested with Litmus it has consistent results across all email clients. I set the font size, line-height and image size to 13px. Since they were all equal, it made it easier to align. I didn't put an align on the table because it should default to middle-align. On the image I placed vertical-align: -2px; Outlook has buggy support when it comes to using values like middle, but not with number values. in the style sheet and added display: inline-block;. I placed everything in one <td>.
With Gmail, Apple, IOS, Android and other email clients, everything remains consistent. With Outlook, it shifts about a pixel.
I also added text-decoration: none; to the hrefs to clean up the look a bit.
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: 0;">
<tr>
<td style="font-family: sans-serif; font-size: 13px; line-height: 13px; text-decoration: none;">
555-555-5555 |
stackoverflow.com |
<img src="https://i.ibb.co/hf2gbC1/in.png" style="vertical-align: -2px;" alt="United States Appraisals LinkedIn" width="13" height="13">
</td>
</tr>
</table>
Good luck.
I would use valign="bottom" for all tds, and in addition add some padding-bottom to the img tag to correct the slight vertical offset between text and image (actually only 1px in this particular example):
<table cellspacing="0" cellpadding="0">
<td height="100%" align="left" valign="bottom">
555-555-5555 |
</td>
<td height="100%" align="left" valign="bottom">
stackoverflow.com |
</td>
<td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;" valign="bottom">
<img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px; padding-bottom: 1px;" alt="United States Appraisals LinkedIn" width="11" height="11">
</td>
</table>
writing html for email is like a trip back to the 90ies!
if you wrap all your <td> inside a tabelrow <tr> and set it's valign to bottom,
just run the code snippet:
<table cellspacing="0" cellpadding="0">
<tr height="20px" valign="bottom" bgcolor="#FFFFCC" >
<td height="100%" align="left">
555-555-5555 |
</td>
<td height="100%" align="left">
stackoverflow.com |
</td>
<td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;">
<img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px" alt="United States Appraisals LinkedIn" width="11" height="11">
</td>
</tr>
</table>
I have a HTML newsletter table, to structure the content I want horizontal borders. Somehow the horizontal borders always have 100% width according to the table width. How can I achieve 20px padding to the left and right of it?
js fiddle
HTML
<table border="1" cellpadding="0" cellspacing="0" align="center" width="400">
<tr>
<td >Banana
</td>
</tr>
<tr style=" padding: 0 20px 0 20px;">
<td style=" padding: 0 20px 0 20px; border-bottom: 3px solid red;">
</td>
</tr>
<tr>
<td >Apple
</td>
</tr>
</table>
you can't able to do what you want in current code
you need to do some trick
see this
<table border="0" cellpadding="0" cellspacing="0" align="center" width="400">
<tr>
<td >Banana
</td>
</tr>
<tr >
<td> <hr style=" border:0px; margin: 0 20px 0 20px; border-bottom: 3px solid red;">
</td>
</tr>
<tr>
<td >Apple
</td>
</tr>
</table>
i have used (HR) tag in 2nd table row, this will solve your problem ☺
A border does not take padding into account, but it does with margin. See the CSS Box Modell for reference.
On CSS, there is the cascade. It parses top-dowmn and specific overrides general
There are many ways to achieve what you want (including ways in which we have to change the HTML code). Suppose you want to keep the table layout. You can just set the border-left and border-right of the middle td like this:
tr.hr > td {
border:none;
border-left:20px solid white;
border-right:20px solid white;
background:red;
height:3px;
}
HTML:
<tr> <td> Banana </td> </tr>
<tr class='hr'> <td></td></tr>
<tr> <td> Apple </td> </tr>
Demo.
Note that the color of border-left and border-right should be the same to the background color of your table. (they are all white in the demo).
Please have a look at the HTML email boilerplate.
http://htmlemailboilerplate.com/#f1
Limitations using CSS: http://www.campaignmonitor.com/css/. It solves may issues with ie. spacing amongst others and email clients rendering issues (Gmail, Outlook,Yahoo, ...)
HTML emails need to respect 600px width as it is a default for the preview.
To test the HTML email (if no mail configured on a testing server) you could use http://putsmail.com/ Check also on smart phone as many people tend to read mail on it
You can achieve the effect using a combination of 3 cells where the first and last use spacers and the middle can be a red solid color gif.
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" width="20"><img width="20" height="3" src="transparent.gif" alt="" /></td>
<td valign="top" width="560">
<img src="red.gif" width="560" height="3" alt="" />
</td>
<td valign="top" width="20"><img width="20" height="3" src="transparent.gif" alt="" /></td>
</tr>
</table>
I am trying to create an email template like following. I have used table. I am able to do everything except the image is not displayed at proper position. The images should be displayed in middle and on top of the container(see screen 1), but I am not able accomplished it. I have tried to provide negative margin to container, but gmail and other mail services are ignoring the negative margin.
Here's what I was able to accomplishd till so far.
The code is present here. Can anyone please help with this?
Updated answer:
You can't use negative margin in html email. To mimic this, there are 2 ways to do it, the nested tables way and the more complex rowspan way:
<!-- The nested way -->
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook -->
<tr>
<td width="200" height="80" bgcolor="#007700">
<table width="100%" height="80" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td height="40" bgcolor="#CCCCCC">
</td>
</tr>
</table>
</td>
<td width="100" height="80" bgcolor="#4444FF">
<img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="200" height="80" bgcolor="#FFFFFF">
<table width="100%" height="80" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td height="40" bgcolor="#CCCCCC">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="500" height="200" colspan="3">
</td>
</tr>
</table>
<br><br>
<!-- The fancy rowspan way -->
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook -->
<tr>
<td width="200" height="40" bgcolor="#FFFFFF">
</td>
<td width="100" height="80" rowspan="2" bgcolor="#4444FF">
<img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="200" height="40" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td width="200" height="40">
</td>
<td width="200" height="40">
</td>
</tr>
<tr>
<td width="500" height="200" colspan="3">
</td>
</tr>
</table>
Original answer:
For basic positioning:
Horizontally, use align="left|center|right", vertically use valign="top|middle|bottom"
Here is how to place an image center top of a table:
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td height="500" align="center" valign="top">
<img alt="" src="" width="100" height="100" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
</table>
As I said:
If it was me i would make the top border and the image a row. – Alex
Thomas 23 mins ago
Change you top row to:
<td valign="bottom">
<b style="border-top-left-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-right:none;"> </b>
</td>
<td class="text-center" width="64">
<img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png"> </td>
<td valign="bottom">
<b style="border-top-right-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-left:none;"> </b>
</td>
check out the result - http://jsfiddle.net/562ux.
I've not tested this in a email Client, but as #Kheema Pandey says, you should try to use inline styles.
It is a good practice to use inline style while creating newsletter. Also outlook doesn't support margin negative property.
in your case the image is not appear center so you can use a inline style here 'style="text-align:center;"'.
<td style="text-align:center;">
<img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png" />
</td>
I have a design of an email template, and I am tinkering about the best way to tackle the styling of the following element in HTML/CSS. Note a few things:
Since it's for an HTML email, mainly tables will be used.
Using negative margins will probably not be compatible with different mail clients.
Note the white border around the button
Would you recommend using a background image for this entire block? Or is there an elegant way that will look like this and works across clients.
Here's my set-up: http://jsfiddle.net/ZHkdV/
Here you go - only need a 30x30 image for the top corner:
<table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#F1F1F1">
<tr>
<td width="30" height="30">
<img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="30" height="30" alt="">
</td>
<td width="240" height="30">
</td>
<td width="30" height="30">
</td>
</tr>
<tr>
<td width="30" height="160">
</td>
<td width="240" height="160" valign="top">
<font style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #757575;">
<br>
some text here
</font>
</td>
<td width="30" height="160">
</td>
</tr>
<tr>
<td width="300" height="40" colspan="3" bgcolor="#FFFFFF"><!-- undeclared light gray as Outlook can add spaces at bottom of this td on forwarding (hides unwanted line) -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="20" bgcolor="#F1F1F1">
</td>
<a href="" style="color: #757575; font-weight: bold; text-decoration: none;"><!-- css button, you can lose this and put a href'd image in the cell if you prefer. -->
<td width="200" height="40" bgcolor="#CBBCDC" rowspan="2" valign="middle" align="center">
<font style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #757575;">
BUTTON
</font>
</td>
</a>
<td width="50" height="20" bgcolor="#F1F1F1">
</td>
</tr>
<tr>
<td width="50" height="20" bgcolor="FFFFFF">
</td>
<td width="50" height="20" bgcolor="FFFFFF">
</td>
</tr>
</table>
</td>
</tr>
</table>
This should hold up in all clients...
For e-mail templates, you don't have to worry about validation, so you can use pretty 'hacky' html. One way round client compatibility is to have every row be a table in and of itself, set inside one main 'wrapper' table.
Then you can set as many divisions as you want in each, remembering to reset the borders on each table, row and cell.
Each cell gets it's own image or slice of an image. For the last row you could simply have one image in an anchor tag. Also remember to keep all styling on elements inline.
The html email Boilerplate is pretty much bulletproof.
http://htmlemailboilerplate.com/
<table> <!- Wrapper ->
<tr>
<td>
<table>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
Background images aren't very compatible either:
http://www.campaignmonitor.com/css/
I would just slice the last row into 3 separate images (left, button, right).
If you would rather have one image for the whole row, you can also use an image map to just make the button part a link.
I have a table that has worked correctly for many years, but recently the table widths have gone slightly haywire. It's an old HTML site I maintain but didn't write (it should be rewritten in CSS) but the owner doesn't want to do it yet and it's a very large site.
No changes were made to the table structure, yet the width=x % is no longer working correctly on part of it. I know the table is messy and overly complex
I've stared at this and I know I'm missing something easy. There are some errors in the table, but they have not prevented any rendering engine from displaying it properly until recently (client noticed it a few days ago).
The exact problem is that a nested table (see *problem below) is not allocating space on a 25%, x%, 25% basis. The x% is slightly under 50%, but the two outer columns should be 25% each (when the browser is large enough) and they used to scale equally. Now, the left column is always larger than the right proportionally, the middle expands and shrinks with the size of the browser, but the right column is always too small and crowded.
I'm sorry for the code. It's a messy table and I wanted to cut what I thought was extraneous but leave the structure.
I'm stumped. Any help would be appreciated.
CLARIFICATION. This table has 3 nested tables within it. Those 3 tables used to resize as you changed the size of the browser window, but now only 2 of the 3 are scaling. The left-most and the center tables scale and re-size as part of the whole; the right-most nested table no longer scales and has shrunk below the 25% width threshold as specified. This is a new phenomenon, but none of the base code has been changed (I verified from a 1 year old copy of the page).
<table width="100%" height="500" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5" height="54" align="left" valign="top" bgcolor="#FFFFFF"><br /> </td>
</tr>
<tr>
<td colspan="5" height="21" align="left" valign="top" bgcolor="#FFFFFF"><some images><br /> </td>
</tr>
<tr>
<td colspan="5" height="25" align="left" valign="top" bgcolor="#FFFFFF"><br /> </td>
</tr>
<tr>
<td colspan="3" width="100%" height="1" align="left" valign="middle" </td>
</tr>
<tr> ************PROBLEM STARTS HERE ***************
<td colspan="1" width="25%" height="485" valign="middle" align="right" >
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="right" valign="middle">
<p class="x">
<br />
<br />
</p>
</td>
<td width="15" align="right" valign="middle"></td>
</tr>
</table></td>
<td colspan="1" height="450" width="1" valign="top" align="right" </td>
<td colspan="1" height="485" align="center" valign="top">
<table width="100%" border="0" valign="top" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="1" height="485" align="center" valign="middle"></td>
</tr>
</table></td>
<td colspan="1" height="450" width="1" valign="top" align="right" </td>
<td colspan="1" height="485" width="25%" valign="middle" align="right" bgcolor="#84968A"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15" align="right" valign="top"></td>
<td align="left" valign="middle">
<p class="x">
<br />
<br />
</p>
</td>
</tr>
</table></td>
</tr>
</table>
Actually, problem lies in the row above where you have "problem starts here":
<td colspan="3" width="100%" height="1" align="left" valign="middle"> </td>
You are saying that 3 columns are 100% of the width. Then, your next row has 5 cells.