I have problem with creating table to create mail with order confirmation.
First row in table are not equal with the next one. On web browser everything is fine with width. I've tried everything and nothing worked. Lines in html:
<td style=\"color: #999999; word-break:break-all; width: 275px;\">
I have tried also something like this:
<td width=\"100%\" style=\"color: #999999;\">
As for the next line and all subsequent tables everything are displayed correctly.
Please help me because I don't have idea what to do.
Outlook uses Word as an email editor. You can read about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the following articles in MSDN:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
Yes, thank You very much for your answer but as I can see element
td style
and
td width
are supported in outlook.
Related
I inherited a WordPress plugin that sends an RSS feed of content to Mailchimp to generate an email. This code (which I cannot find the source) is adding an extra logo image which is throwing off the formatting. I know I should add something like
<!--[if !mso 9]><!-->
to the code if I want to hide it in Outlook, but I cannot find the source to add this. I can only add external CSS. The usual display: none works in the other email platforms. Any advice on how to remove this extra image instance in Outlook via external CSS?
The code you provided is an HTML conditional comment. It can only work embedded in the HTML code. If you want to hide an element from an external stylesheet in the Outlooks on Windows (from 2007 and above), you can use the mso-hide:all property. It’s basically a display:none but for Word’s rendering engine. Although, contrary to display:none, this doesn’t always inherit to <table> children elements. In that case you could use a double selector like the following.
.your-element,
.your-element table {
mso-hide: all;
}
http://jsfiddle.net/TTwtf/
This is some simple CSS that changes the display of a table using a media query. If width is less than a certain amount, it hides the table header, and will make each row of 5 columns display across 3 lines instead (2/2/1) . U can widen and narrow the window in jsfiddle and see it working.
I copy pasted the html into a blank html file.
I copy pasted the css into a blank css file.
I linked both using the following so that the html file looks like:
<link rel="stylesheet" type="text/css" href="jsfiddle.css" />
<table>
<thead>
<tr>
<th class="cell-time">Booking Time</th>
.......
I'm testing it on my localhost in chrome. The table headers disappear however the table cells don't stack above one another like they do on jsfiddle. And I tested jsfiddle using the same chrome browser and it works on jsfiddle.
What am i missing or doing wrong?
Sounds like it's time for the Chrome Debugger tool.
Try right clicking on the browser page where the table headers should be and select Inspect Element. Using the debugging tool, you can then verify that the html and the CSS is as you expect it to be (and experiment with changes until things work as you'd like).
I'm getting double spacing in Outlook 2007/2010/2013 and GMail but it looks fine elsewhere. I'm creating a newsletter and I've tried all-sorts: border-collapses, margins, paddings, spans, and still can't get my head around this. Can anyone see where I'm going wrong? Am I missing something?
Link below - source code too long to paste here. Sorry.
http://pastebin.com/FW3RgYuv
For one, all styles must be inline. Most mail clients do not support stylesheets.
You are not building a web page, you're building an email, therefore everything in your HEAD section will be removed, including your embedded stylesheet.
In you code you have </br>. This is not a valid tag. Use <br />.
NEVER NEVER use !important. Inline styles already override other styles, plus you can dig yourself into a dead end.
Put your text in a DIV or a P and style that, not the TD. Not all styles are supported by every mail client. Here's a good list to compare to.
I am creating the email format from my code-behind. In that I am using the <div> tags and also the <a> tags. and for them i am applying the style background:url property. Using this way I am getting the emails with images and style. It works proper in the Thunderbird but not in MS Outlook 2007. It prevents the inline images form render.
Is there any other way that I can insert the images inline.
thanks in advance.
Most email clients like Outlook does not render divs properly try to do as following
Do not use Divs.
Only use tables and use fixed width in pixels on each table cell
etc.
Only use inline styling.
Make sure your images are accessible. like
www.mywebsite.com/image1.gif so that outlook can download it.
There are more but these are the basic things which needs to be addressed.
Your problem is div. Since Email templates doesn't support div, you have to use table instead.
Instead of background use image, but with border which set to 0.
<img src="yourimage" alt="My Image" />
-->>see HTML Images
You might have a look at this article about Email Templates
Here's my page
It looks correct in Firefox, but of course in Internet Explorer, there's an issue.
The main body of the page is not displaying correctly. The left and right divs are not showing the white background that I'm trying to get them to.
Your HTML appears to be broken. For example <div id="mainbody" is not closed. Run it through a validator and fix all the markup problems.
Try separating your shortcut for background in your #left id in css. IE may not be parsing it correctly.
The #right div looks OK (I'm using IE7).
You need to change <div id="mainbody" to <div id="mainbody"> as i told you earlier.
Use the W3C validator: [Invalid] Markup Validation of modastudio.com/docs_new/bostondentalposters.shtml - W3C Markup Validator.
You've got a bad doctype that will throw IE into quirks mode, as well as missing tags, double charset calls (that should be UTF instead of 8859), duplicated meta tags, etc.....
You're also nesting tables and lists inside of paragraph tags which is invalid markup for the doctype you're using. A handful of the meta tags are not closed correctly along with capitalization of attributes which are also not allowed with the selected doctype. The stylesheet link tag is not closed correctly. The images tags in the table are not close correctly nor are the break tags.
Fix the html errors first and then see where you're at with your layout.
Good luck and hope this helps some.
Maybe not really an answer to your question, but since you seem to develop in Firefox, you might want to try the HTML Validator extension. Makes this kind of development a lot easier.