I am having a similar problem coding this email for Outlook 2010 (of course). The email is fine in most client but the width of the text ares is bigger than it should be. No matter what CSS, or html width I apply Outlook is rendering the width of the cell wider than it should be.
Preview Email Clients
Web View
I think the problem is with your colspans and rowspans. I recommend ditching them completely and layering tables instead. This will give you something similar to CSS.
Create one "container" table that is 1 column by 3 rows. Then create a new table in the top row for the header, one table in center for the body, and one in the bottom for a footer.
Then if you need to break things down even further, keep adding tables.
Good luck!
Related
Does anyone know how to force a TD to center all content on mobile within in without using style sheets? In Outlook I have 3 tables, all aligned left so that they line up horizontally on desktop. On mobile when the tables all drop below each other, they are still aligned left so not centered on the device. Even though the housing TD is align="center", the table's align="left" overrides. I'm wracking my brain and nothing seems to work. And I cannot use #media queries in Outlook, so it has to be all inline styles, simplicity within html. Can anyone give me any ideas? This is a riddle I can't crack. HTML is here, thanks all!!!
Here is the html that gets loaded into Outlook-
https://comms.pmail4.com/PoliteMail2/files/MSFT_001_3column.html
Nest 2 tables. If you are formatting emails this is a major headache. The gist for you would be to create a table that spans the full width with a row of 3 tds spread evenly. Make each td have content center aligned. Make a table inside each td which contains only your desired td.
I am working on cleaning up my companies newsletter emails. My issue is that I would like to force my <td> to respect the width that I specify rather than following the widths of the previous <td>. The other issue is that this needs to be very email client compatible.
Here's a jsfiddle of what I'm working on. http://jsfiddle.net/zwf0dL8r/ Sorry about the inline styles, aren't html emails great..
As you can see, the light grey areas are following the width of the first <td> which is holding the cpap.com logo.
Ideally, I wanted to be able to define the widths of <td>s to something new, each time I create a new <tbody>..
You could use CSS to force some behavior, but the browser or email client generally calculate the width of columns automatically based on content, using the widest specified width for the column when the content is shorter. To avoid this you can add the property table-layout: fixed; to the style of the table, but you will have to manually assign the correct widths for each column.
Tables with fixed layout are faster to display but don't resize according to content. The larger content overflows it's cell, causing an ugly looking overlapping data.
Take a look here for e-mail client compatibility: https://www.campaignmonitor.com/css/
Edit.:
To make the bellow cell take the space of the above cells you can add a colspan="numOfColsToTake".
What many people forget is that each <TD> define a column, not only an individual cell. Imagine you are designing it on Excel. If you would do this on Excel, you would have to use the merge cells option for the bellow cell to take the space of the 2 above. The colspan attribute of <TD> elements makes exactly this.
<td colspan="2"><p>Something</p></td>
I am working on a Newsletter and am therefore pretty much forced to use tables.
According to this source, "margin-top" and "margin-bottom" is not supported by Outlook 2007/10/13. Since Outlook is a requirement for my Newsletter, I need a workaround.
Obviously there's "cellspacing", I however do sometimes want to apply margin-top/bottom without left/right. How can this be achieved?
If you needed pixel perfect height I would pad an empty cell with a spacer (clear 1px x 1px gif).
In the end I was able to solve this problem to my satisfaction by adding empty rows (without images) with a fixed height. This actually seems to be working fine with quite a lot email clients.
I need to display a table with 14 columns in the outlook mail. The column heading are some extra length and i need to show the headings in a signle line. so I am setting width for every column, but the problem is the whole table is not widening after some width. example if I give extra width it is working fine. if i give extra width to all the columns then all the columns are adjusting and all the column headings are coming in 2 or 3 lines.
I copied the source from the outlook mail and I saved the same mail and I opened with IE browser then it is working fine. I am getting problem only when with outlook client.
Can someone help me in this regards
Thanks in advance
Satish
using "min-width" property. your problem may be solved try it....
Though I had found the workaround for my problem, I still would like to clarify some things.
Here's what I wanted to achieve: a table with an image as separator between rows using generated content
Here was my first effort: http://jsfiddle.net/5Vqqf/68/
As you can see, the generated content in the table cells (td) doesn't seem to render anything. I expected a red line underneath each rows.
Second effort: http://jsfiddle.net/5Vqqf/69/
I insert some content to the content property, ie. content:".";
This seems to do the trick in generating the content. However, Firefox, unfortunately, doesn't render it right, in that the content is in relation to the whole page. (Notice the red line at the bottom in FF?)
Third effort: .../70/ (Same link but change the last number to 70 - Sorry, I don't have the privilege to post more than 2 links yet)
Giving the cells a float seem to fix Firefox's problem. However, the heights became inconsistent.
Last effort: .../72/
Finally, I resort to applying the content into the table rows (tr) instead. And this did the trick for all major browsers (excluding IE7, of course).
Okay, so here are my questions:
Why can't this work with an empty content like most elements do?
Why does Firefox render it in relation to the whole page (see second effort)? Is it a bug on FF side?
Is it a bad practice applying content into the table rows (tr)?
(Note: this question is regardless of the possibility of using background image directly on the cells themselves or using borders)