I have an html email .oft (Outlook File Template) created in Outlook 2010 with a table layout width set to 600px. This ecard template is distributed to others at the company who might want to add a few lines of texts and signature to the bottom after the table.
However all the added text appears on the top right next to the table. How can I either block any content on the right of the table or set the width of the email to be only 600px so any new additions will appear correctly at the bottom after the table? I know that floats and clear css don't work reliably across in html emails.
Thanks, Attila
Your best bet would be to create a table at 100% width. Inside that table, make two cells, one with a width of 600, and another with a width of 'auto'. THis will then span the full remaining width of the email window.
This is not an ideal situation, but as you have mentioned, there are very tight limitations on what is achievable in MS Outlook 2010, let alone 2007.
Something like this:
<table><tr>
<td width="600">Enter details here</td>
<td> (space character so no client disregards this cell) </td>
</tr></table>
You may need to experiment with the width of that last cell, you could try and make it 100% or something to force the take up of all extra space on the right, but it will come down to your code, and your email, and what works best for that organization.
If that doesn't work, consider a nested table inside the first table to be extra sure...
<table width="100"><tr>
<td width="100%">
<table width="600"><tr>
<td width="600">Enter details here</td>
</tr></table>
</td>
<td> (space character so no client disregards this cell) </td>
</tr></table>
As a guide - I use the Campaign Monitor reference for compatibilities:
http://www.campaignmonitor.com/css/ - download the XLS file on that page.
Good luck.
Related
The Doxygen don't say anything about the creation of a particular title (or even change de the size of a simple text... lame). My search are surprisingly infructuous about this simple task:
I search a way to put a bigger title on the main page. This title must be huge, squared and centered, here's my actual code:
<div align="center">
<table>
<tr><td> {/Huge **Huge sized title**}
</table>
</div>
Everything work except the size, I tried it outside, font size="X" and the # don't work either.
How to use it correctly?
I'm making an e-mail template. I want to make a line below the heroImage.jpg. The line cannot be a part of the heroImage.jpg as there are several other lines in the e-mail and they should all look the same.
The way I do it is that I set a border-bottom to a table row in which heroImage.jpg is placed.
My problem is that in GMAIL (when the e-mail is delivered, but not in OUTLOOK for example) I get a thin ribbon of space between heroImage.jpg and my line. I think it is because GMAIL does not recognize valign nor vertical-align and thus the heroImage.jpg is aligned top (probably default option) and the colour of #heroImageBlock is thus visible.
But how it should be is that heroImage.jpg would be aligned bottom and right below to it would be my line (no annoying space in between).
Is there a way to force GMAIL to recognize valign or vertical-align and get rid of that annoying space?
HTML
<tr>
<td align="center" valign="bottom" id="heroImageContainer">
<table border="0" cellpadding="0" cellspacing="0" width="600" id="heroImageBlock">
<tr class="border-bottom">
<td>
<img src="images/heroImage.jpg" alt="" height="150" width="600" id="heroImage" />
</td>
</tr>
</table>
</td>
</tr>
CSS
#heroImageBlock td{vertical-align:bottom;}
I've tried to assign vertical align to all other elements too (see below) but it does not work.
#heroImageContainer {vertical-align:bottom;}
#heroImageBlock{vertical-align:bottom;}
#heroImageBlock tr{vertical-align:bottom;}
In OUTLOOK image and a red line are nicely together as it should be:
In GMAIL there is an annoying gray line between the image and the red line.
Valign/vertical align isn't your issue here. Since you're specifically setting a block image, you shouldn't have anything to vertically align. This points to another issue to do with the way you're declaring the image, but I'll get to that soon.
FYI, it's best if you give us more scope or more code. You're referencing a border-bottom class, but we can't see what properties to render that border are. Same goes for the id on the image. If any properties are being set on classes or IDs in the head, it's best to include those for us to help you debug.
Here are my suggested improvements to try and fix this.
1. Don't set any properties or classes on table rows. They aren't designed for that use. Moving the border may fix the issue but even if it doesn't, tables and table cells are where you should be adding these. In this case, move the border-bottom class declaration to the table cell under the row.
2. Have you tried setting display:block; on the image? By default, images will be declared as inline and you have to specifically set is as block. When inline, spacing can appear below images and will throw spacing and dimensions out when trying to be pixel perfect, or in your case aligning content directly below.
Let me know how those go.
Try adding these styles to the parent element:
font-size:0px and line-height:0px.
By default Gmail tends to add its own spacing. The above should remove it.
I used the following code to generate a form in attached image.
Is it possible to change the size of the fields in the form.
I want to decrease size of input field of Estimated time and the dropbox field to the right of it
{{=form.custom.begin}}
<table>
<table><tr>
<td><b>Type :</b></td><td><div>{{=form.custom.widget.type}}</div></td>
</tr><tr>
<td><b>Title :</b></td><td><div>{{=form.custom.widget.title}}</div></td>
</tr><tr>
<td><b>Description :</b></td><td><div>{{=form.custom.widget.description}}</div></td>
</tr><tr>
<td><b>Estimated Time :</b></td><div'><td>{{=form.custom.widget.estimated_time}}{{=form.custom.widget.estimated_time_unit}}</td> </div>
</tr>
<tr>
<td></td><td><div align='center'>{{=form.custom.submit}}</div></td>
</tr>
</table>
{{=form.custom.end}}
Yes. You can and there are many ways.
The recommended way is to look at the generates JS. You will find it follows a naming convention described in the book. You can use CSS to change the look-and feel of every widget.
input[name=estimate_time] { width:50px }
Similarly you can use JS/jQuery (I would recommend you do this in the view).
jQuery(document).ready(function(){ jQuery('input[name=estimate_time]').css('width','50px');});
You can also use jQuery-like syntax in python in the controller:
form.element('input[name=estimate_time]')['_style']='width:50px'
I have a need to create following kind of markup with wicket using ajax:
<table>
<tr>
<td><a>first</a></td>
<tr>
<tr>
<td>displayed/closed if first is clicked <a>open</a></td>
</tr>
<tr><td>this and following displayed/closed if above open is clicked</td></tr>
<tr><td>there may be any number of these</td></tr>
<tr>
<td>there may be any number of these as well <a>open</a></td>
</tr>
<tr>
<td>any number of these as well <a>second</a></td>
</tr>
</table>
How to use ListViews or some other wicket element to individually toggle open "inner" rows of the table. I don't want to resort to render everything and toggling visibility but really create the rows in server side only when expand is requested. The markup should also be valid xhtml (rules out arbitrary container for row groups). I know I can put multiple tbodys, but it's good enough only for one level of nesting (no .... allowed).
From Lord Torgamus' comment, the ajax tree sounds appropriate..
I am checking on HTML content on my page, and I've got the split down to have the variable left with this content:
">
<td>Oklahoma City</td>
<td>Oklahoma</td>
<td>OK</td>
<td>405</td>
<td>CST</td>
</tr>
</table>
<div id="
Those are dynamic pages I'm checking, so the data will always be different, but the layout the same...
How can I get the value out of the second <td> if that html is in 1 variable(string)?
It was a full page, I've used explode twice to remove everything above a div field and everything below the last dive field id... so it has some open html tags left because I did not know how to get rid of that along the way to be left with just this:
<td>Oklahoma City</td>
<td>Oklahoma</td>
<td>OK</td>
<td>405</td>
<td>CST</td>
</tr>
</table>
Can you tell me how to get that out? I just need the second one because it is the county and that is what I'm checking on...