It must be something stupid, but I can't figure it out so far...
Here is my HTML:
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="height: 8px"><img src="/media/note2.png" width="8" height="8" border="0"></td>
<td style="height: 8px"></td>
<td style="height: 8px"><img src="/media/note1.png" width="8" height="8" border="0"></td>
</tr>
<tr>
<td class="NoteCell"></td>
<td class="NoteCell">{{ text }}</td>
<td class="NoteCell"></td>
</tr>
<tr>
<td style="height: 8px"><img src="/media/note4.png" width="8" height="8" border="0"></td>
<td style="height: 8px"></td>
<td style="height: 8px"><img src="/media/note3.png" width="8" height="8" border="0"></td>
</tr>
I'm expecting the first and third rows to have a height of 8 pixels, but for some reason they are much higher (as if there was text inside, but there is no text!)
Puzzled... Any help will be appreciated!
Try td img { display: block; }
Tip 1. Paste your code snippet into an empty html page and find out if the problem still occurs, make sure the doc type is the same as the target page.
Tip 2. Use a browser extension with CSS debug facilities, check and fiddle with the css that gets applied to your table rows, cells and images in the cells.
Tip 3. You could try if one of these help by adding them all:
table {border-collapse:collapse;table-layout:fixed}
td,tr {padding:0}
td img {margin:0;height:8px}
If it helps, it means that other definitions in your stylesheet make the cells or rows higher. By removing my css suggestions one by one, you can find out what is causing it.
I had a similar problem, and vertical-align:top; did the trick for me.
The reason that the second columns of 1st and 3rd row define the minimum height.
Note that all the columns in a row will have same height and all rows in a column will have same width.
That's how the tables are rendered.
So, you will have to additionally write:
td { font-size: 8px; }
EDIT: Fixed fontsize to font-size
Related
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.
Hello guys i am trying to send an email with HTML in it, and of course i know that the formatting and alot of CSS is not supported in Outlook, but i was wondering why this simple thing was showing broken, is there any quick fix or a workaround/alternative? look at how the buttons should appear:
http://puu.sh/84ijt.png
But they appear like this:
http://puu.sh/84ijA.png
Here is the code for it:
<tr>
<td style="display:block;min-height:38px;max-height:38px;">
<p style="margin-left:15px;">
<a style="font-size: 10pt;color: #fff;text-align: center;display:block; width:70px;height:25px;text-decoration:none;background-color: #c64141;padding:5px 5px 0px 5px;border: 1px solid #901313;margin-right:10px;float:left;"
href="link here..">Enquire</a>
Full Details
</p>
</div>
</tr>
</td>
There is a bit of mis-information in this thread.
You can use an image for a button, however more advanced designers are trending towards "bulletproof" buttons these days. They display with images turned off. See this link: buttons.cm
Background images are supported in Outlook, but only in the <body> tag OR using VML, see the buttons.cm link above or backgrounds.cm for examples.
Back to your specific example, there are a few ways to accomplish it, but here is how I would do it:
<table width="300" border="0" cellpadding="0" cellspacing="0" style="border:solid 1px #000000;">
<tr>
<td style="padding-top:20px; padding-bottom:10px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50">
</td>
<td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;">
Enquire
</td>
<td width="20">
</td>
<td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;">
Full Details
</td>
<td width="50">
</td>
</tr>
</table>
</td>
</tr>
</table>
On a side note, you need to use the 6-digit hex colors in html email, and don't waste your time with the following css properties as they have inconsistent support:
margin (use padding instead)
text-align (use align="" instead)
min-height & max-height
float (use align="" instead)
background-color (use bgcolor="" instead)
Also, avoid shorthand like padding:5px 5px 0px 5px;. Unfortunately you need to write it out padding:5px; padding-bottom:0;
As an email marketer I suggest you use an image for your button. Especially if it is a call to action. The one thing you don't want to be broken is that, and the only way you can trust it wont be and that is to use an image within a table cell.
I hope that helps!
Have you tried giving the <td> the background-color? (or another container)
You could also try
<a href="#">
<span style="display:block;background-color:red;color:white;width:100px;text-align:center;">link</span>
</a>
I haven't tested in Outlook but it might work.
Using images isn't the best solution, especially since most of the time emails are rendered without images until the user accepts to view images.
The way I do it is a table with in a table, so something like this:
<table width="outside container width here">
<tbody>
<tr>
<table style="apply your styles here, background colors, paddings etc (do not use margins, poorly supported.)" height="height of inner container" width="inner container width here" align="however you want it aligned">
<tbody><tr><td>Your button actually goes here</td></tr></tbody>
</table>
</tr>
</tbody>
</table>
I have a table coded as below;
<table style="table-layout:fixed">
<tr>
<td class="htTd" width="100" style="word-wrap:break-word">someDynamicLongtextsomeLongtextsomeLongtextsomeLongtextsomeLongtextsomeLongtextsomeLongtextsomeLongtext</td>
<td class="htTd" width="100" style="word-wrap:break-word">someLongtextsomeLongtextsomeLongtext</td>
</tr>
<tr>
<td class="htTd" width="100" style="word-wrap:break-word">someContentsomeContentsomeContent</td>
<td class="htTd" width="100" style="word-wrap:break-word">someContent</td>
</tr>
</table>
In CSS, I have
htTd{height:30px}
Now the issue is that since the content is dynamic (coming from JSP), the long text does not wrap correctly in IE. In IE, it kind of displays 2 lines and just hides the rest of the content. It wraps correctly in Firefox.
While the issue can be fixed by just removing the height attribute from the CSS...Unfortunately I cannot do that since my CSS is used in many other files and hence I cannot change the CSS.
How do I fix the issue by adding any other CSS attribute in the CSS ?
I believe that the attribute should be break-word. This
<td class="htTd" width="100" style="word-wrap:break:word">
should be:
<td class="htTd" width="100" style="word-wrap:break-word">
you can for example add an id to the table and write something like this:
#tableId td{height: auto !important;}
or just
#tableId .htTd{height: auto} (i would vote for that one)
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.
I have a table nested as such:
<table>
<tr>
<td>
<table>...
</table>
</td>
</tr>
</table>
More precisely:
some style info:
div.centered{
text-align: center;
height:100%;
}
div.centered table.centeredT {
margin: 0 auto;
text-align: left;
max-width: 781px;
overflow: hidden;
height:100%;
}
Layout:
<table style="height:100%; min-height:100%;" class="centeredT" border="1" cellpadding="0" cellspacing="0" width="781px" >
<tr>
<td style="vertical-align:top; padding-bottom:7px;padding-right:5px;width:33%;height:100%;">
<table style="table-layout:fixed;height:100%;min-height:100%;border:solid 1px black;" border="0" id="Table1" cellspacing="0" cellpadding="0" class="verdanaSmall" width="257px" >
<!--this first row is simply a spacer row because I am using table-layout:fixed attribute -->
<tr>
<td width="80px"></td>
<td width="175px"></td>
</tr>
<tr >
<td colspan="2" style="height:100%;">
<table border="0" width="100%" cellspacing="0" cellpadding="0" style="border-top: solid 1px black; border-bottom: solid 1px black;">
<tr>
<td style="text-align: left; vertical-align: middle;"> 1.) </td>
<td align="center" height="20">
<a href="results.asp?pubid=31422&date=10%2F11%2F2010&ttype=eqq"target="_top">
<font face="Verdana" size="2" color="#22476C"><b> Abilene Reporter News </b></font>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><font face="Verdana" size="1" color="#22476C"> Monday, October 11, 2010 </font></td>
</tr>
<tr>
<td align="center" colspan="2" height="100%" id="imagetd">
<a href="../PDFView/PDFView.aspx?pgID=32065209&adID=96332396&ref=50" target="_blank">
<img src="/pages/201010/11/31422/thumbs/A000300001H.gif" style="border: solid 1px black;" alt="" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
The reason for this is that the page is filled dynamically and the inner table is inserted inside a data loop. Anyway, the question is that the inner table is not filling 100% of the available height of the encapsulating td cell. I have set the inner table height, via css, to 100%, the encapsulating table, and also the body tag and so on up the chain. If you look at the page in firefox and opera it lays out perfect but IE does not seem to be obeying the height specifics and just making the table big enough to display the data, does anybody know of a hack/fix for IE, or a way I can correct this..?
As the problem describes: the td-element itself does automatically stretch to 100%, but (in IE) for some reason its height is not passed to its children as 100%.
The solution is quite simple: just add 'height: 100%' to the td-element that is parent of the nested table. This way 100% height will be passed to the td's children when using height: 100%; on them.
It fixes the problem in IE and doesn't seem to cause any problems in other browsers (tested on new browsers Chrome, Firefox and IE).
NOTE: setting the td's height to 100% with an nested table may cause the cell to expand too much. In that cause the height may have to be adjusted to compensate the height of the other rows. With CSS3 this can be easiliy achieved with calc(100% - [height of other rows])
PS: I'm aware that the above question is really old, but I stumbled upon this while googling for a simular problem and it seems no (correct) answer has been provided to this one. For others who will find this page just like I did, it might be helpfull to find an
answer.
Try set padding:0px; on cointaner and inner table.
Ok I havent tested anything but it doesnt look like you have set the inner table height to 100%. You have a class table.centeredT but you have not specified the class on the table. Nor have you specified height: 100% on the inner table itself. Give me a few more minutes and I will try to achieve this on jsfiddle.
Edit: One thing which did just occur to me - which wont be causing the problem but just decreases the code a bit - is that you could use the col attribute instead of an extra row at the top. I have heard that this isnt 100% supported, but I have never had a problem with it personally.
Edit: Ok I have no idea... spent ages on this and not getting anywhere. I personally havent used tables in months - I am good enough at divs, float and clear and alike that I can easily make what looks like a table without a table. If I had to display data in a meaningful way then I would use a table. Is this for displaying data, or can it be displayed just using divs / float / clear?
You need to have fixed heights of the elements that should be spanned to 100% height. Fixed heights means you'll have to set them in pixel height instead of percentage. See this SO question and solution with similar code:
Iframe { height:70%;} not working in IE 8 and Firefox