I have a problem with dynamic height of the table cell. I've set it to rowspan=2 so it should take 2 rows for it's height.
My code:
<table cellspacing="0" cellpadding="0" style="width: 640px;" align="center">
<tr>
<td colspan="3"><img src="bg-top.png" /></td>
</tr>
<tr style="height: 669px;">
<td><img src="bg-left.png" style="display: block"/></td>
<td valign="top" rowspan=2 >
lorem ipsu
</td>
<td><img align="right" src="bg-right.png" style="display: block"/></td>
</tr>
<tr>
<td background="cont.png"></td>
<td background="cont.png"></td>
</tr>
</table>
I'm trying to make images look like a border around the text, and if text is longer than what can be put in 700px than it should repeat cont.png. It looks fine in Opera and Chrome but in IE and Firefox it's not working.
Screnshots:
in mozzila: http://shrani.si/f/1h/12j/3c72q2gv/notworking.png
in chrome: http://shrani.si/f/Q/n/3w7G0jOn/working.png
Any ideas what I might change?
I would convert this to use CSS instead.
I'v got it to work! U used only one row and set background picture to it and then set my left and right on top of it, and set it with valing=top. Now it works evrywhere except in outlook :S
Related
Getting gaps in between images in Outlook <2007, have tried all the usual things like line-height trick, height as image heights
Below is the code. Works fine in all major email clients just Outlook causing the gaps
<table width="579" id="body" cellpadding="0" cellspacing="0">
<tr>
<td width="579" style="line-height:6px">
<img src="http://media.pet-insurance.co.uk/email/test/pet/index_11.jpg" width="579" height="6"/>
</td>
</tr>
<tr>
<td width="579" style="line-height:109px">
<img src="http://media.pet-insurance.co.uk/email/test/pet/index_12.jpg" width="579" height="109"/>
</td>
</tr>
</table>
What it looks like in Outlook <2007:
Resolved - Outlook doesn't like TD heights less than 15px so made them the ideal size
I'm having trouble with a table's behaviour in Firefox. I want a table consisting of two columns in the ratio 3:1. The first column includes 3 images in a second table which should resize to fit into the column.
In Chrome the images resize to fit into the first column, which is correctly set to 75%. They do this whether I specify a max-width or do not give them any size attributes. However, in Firefox, the images do not resize and instead the cell expands to be greater than 75%, meaning that the contents of the second column becomes squashed.
The structure of the code looks like this:
<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align:top;width:75%;">
<table cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td>
<img src="image1.jpg" style="max-width:625px;" />
</td>
<td rowspan="2">
<img src="image2.jpg" style="max-width:240px;" />
</td>
</tr>
<tr>
<td>
<img src="image3.jpg" style="max-width:625px;" />
</td>
</tr>
</tbody>
</table>
</td>
<td>
Second column
</td>
</tr>
</tbody>
</table>
How can I adapt this code so that it works correctly in Firefox as well as in Chrome? I've read other related questions, but haven't been able to find a solution I can get to work.
P.S. Please no comments on how I shouldn't be using CSS like this. I have my reasons for not using a proper stylesheet while I'm playing around.
Unless I'm missing the boat, why don't you simply assign a relative width to the image? A value of 100% will ensure the image resizes in tandem with its parent table cell:
<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align:top;width:75%;">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width:100%;" />
</td>
<td>
Second column
</td>
</tr>
</tbody>
</table>
ref: http://jsfiddle.net/j26Fm/
The trick here I would say is table-layout: fixed;. It does require some additional rules but table-layout is what brings it all together.
Check out: http://codepen.io/pstenstrm/pen/kLKxz
This is worked for me, in IE, FF and Chrome.
<table style="table-layout: fixed; width: 100%; border: 0; cellspacing: 0; cellpadding: 0;">
and
<tr valign="middle">
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
</tr>
I'm using this boilerplate: http://htmlemailboilerplate.com/
I want a table row to be 6px of height and one row to be 1px of height. No matter what I try the table rows wont go less than a height of 15px. Coincidently 15px is the font-size.
Code:
...
<tr>
<td height="6" style="height: 6px;"> </td>
</tr>
<tr>
<td height="1" style="height: 1px;"><img src="images/bar.gif" width="220" height="1" /></td>
</tr>
...
Any way I can get this table rows to be the height I want?
Did you try using CSS to set line-height:1px on your td?
I dont know if they have changed the rules for Outlook 2013 recently, but I found that setting line height and font size on the TD didnt work. I even tried setting it on the TR, that didnt work either.
I put a & nbsp; in the cell and set its font size to 0px as well as putting line height and font size on the TD just to make doubly sure. That seems to have worked for me.
The example below has a 2px green cell - tested in litmus and "real" 2013. Hope this helps!
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" bgcolor="#0000CC"></td>
</tr>
<tr>
<td height="2" bgcolor="#00FF00" style="line-height:0px; font-size:0px;"><font style="font-size:0px; -webkit-text-size-adjust: none;"> </font></td>
</tr>
<tr>
<td height="20" bgcolor="#0000CC"></td>
</tr>
</table>
I needed to add
table td { mso-line-height-rule: exactly; }
to make it work in Outlook 2013.
Table cells will expand to hold the content you put in them, no matter what height you set them to be.
The non-breaking space will be the height of a line. You need to wrap it like this:
<span style="line-height:1px;font-size:1px;"> </span>
Similarly, the cell with the image will be at least as tall as bar.gif
I use line-height and font-size (if smaller than the current) with a (space) -
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="line-height:5px; font-size:5px;"> </td>
</tr>
</table>
Or if inline -
<span style="line-height:5px; font-size:5px;"><br /><br /></span>
I have a table defined as
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="600">
<table width="600" border="0" cellspacing="0" cellpadding="25">
<tr>
<td width="210">Content 1 with grey background</td>
<td width="390">COntent 2 with white background</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="600" colspan="2"><img src="image.jpg" width="600"></td>
</tr>
</table>
Now this image.jpg has 210 px as grey background and 390px as white background in order to align with the above table cells.
However, it shows up as non aligned in outlook 2007. It shows up fine in others.
Any suggestions?
You're lucky it shows at all. The background property is loosely if at all supported by most email clients. I would suggest against using it or using just an <img> tag instead.
Here's more info on what outlook 2007 supports:
http://www.email-standards.org/clients/microsoft-outlook-2007/
I'm designing an HTML Newsletter and I've run into this problem:
As you can see, the cellspacing is completely out of whack: there shouldn't (and CAN'T) be a space between the rows on the left and right column. I don't really know what the culprit could be, any ideas would be appreciated!
Here's the relevant source code:
<table width="740" cellpadding="0" cellspacing="0" border="1">
<tr>
<td colspan="3">
<img src="top.jpg" width="740" height="53">
</td>
</tr>
<tr>
<td colspan="3" height="200" valign="top" id="headerCell">
<img src="header.jpg" width="740" height="200" alt="Headerbild">
</td>
</tr>
<tr>
<td>
L
</td>
<td valign="top" width="600" bgcolor="#ffffff">
CONTENT
</td>
<td>
R
</td>
</tr>
The HTML looks fine to me. Have you tried eliminating the unnecessary whitespace? That could be a possible cause (also, remember the great IE6, which had whitespace issues).
The HTML rendering engines in e-mail clients are just horrible. I've had to design some newsletters a while back and it sucked big time. Here's a nice collection of tips, maybe it'll be of some help.
I finally found out what was causing this spacing: a padding-top set on the center cell caused the left and right cells top edge to stay flush with the content-top of the center cell.