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)
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'm working on a site targeting older feature phone type mobiles that have limited css and html support. I have a table with a single row and two cells, that each contain a link. Ideally i would like both to be clickable. I tried a div solution but on some of the phone browsers I tested the text would dissapear, I assume because this is not entirely semantical.
Any sugggestions on how to accomplish this without using a div?
here is my html
<div><table style="width:100%;"><tbody><tr>
<td class="leftTd"><Left</div></td>
<td class="rightTd"><a href="link2>Right</a></td>
</tr></tbody></table></div>
The markup of the HTML you gave isn't valid. Here it is as valid markup
<table style="width:100%;">
<tbody>
<tr>
<td class="leftTd">Left</td>
<td class="rightTd">Right</td>
</tr>
</tbody>
</table>
then if you make sure the a element are set to display: block; e.g
td a {
display: block;
}
DEMO
td a {
display:block;
width:100%;
height:100%;
}
Also fixed your HTML markup from errors:
<div>
<table style="width:100%;">
<tr>
<td class="leftTd">Left</td>
<td class="rightTd">Right</td>
</tr>
</table>
</div>
In the first link, you have a stray <.
In the second, you didn't close the quotes after href.
Old phones typically have browsers that won't grok broken HTML syntax very well, so I think this is the reason the links won't render.
I suggest you use an editor that checks HTML syntax, or at least some checker like the W3C validator.
HTML4 event attributes
<table border="0" style="cursor:pointer" onMouseover="window.status='http://www.stackoverflow.com/'" onMouseout="window.status=''" onMouseup="window.location='http://www.stackoverflow.com/'" width="158" height="158" style="background-image: url('http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png')">
<tr>
<td style="display:none;">This entire table is a link with no content</td>
</tr>
</table>
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.
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