I'm designing email template. Between some texts I need to put break lines. So far so good on most clients except outlook.com(on browser). It wraps my <br> inside a <p> which has big margin by default.
I have tried to use <br>, <td> with space, <td> with <span> and space inside and <td> with <p> with margin:0 and space inside. Each time i got my html wrapped in a <p>.
Why it wraps my html in <p> ??
I've never found the .ExternalClass hacks to be of any use. Outlook.com is very iffy in general about line-height and <p> tags as a whole, so I've found the best thing to do is remove all <p> tags from my emails just and put all text sections inside a <font> tag inside the <td>.
I ran a quick litmus test and wasn't able to reproduce your results, with either <br> or <br/> however you could just nest a table inside a <td>, don't define heights, and use multiple rows in that table to simulate breaks. I've found that it doesn't mess with my usual line-height rhythm.
Outlook has trouble rendering html emails correctly.
There is a little hack that might help you:
<style type="text/css">
.ExternalClass p (Or whatever, you can target pretty much anything here)
{line-height: 50%; margin:0;}
</style>
This will talk to outlook's native stylesheets and adjust those, since outlook applies the .ExternalClass class to your email.
Here is some important information on the subject: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com
Many will say that all styling in html-emails has to be inline. This is true to an extent because some clients will strip the head and body tags from your email. But for those that don't, like outlook, it is a valuable space for work arounds.
Hope this helps.
The reason Outlook wraps everything in <p> tags is because it uses the MS Word engine to render html instead of a browser based renderer.
The p tags are unavoidable and the suggestions above are good ways to 'zero out' the unwanted margins. Outlook doesn't strip <style> tags, however some MS Exchange servers do (for security I assume), so if you are finding your style tags ignored in Outlook, try sending to a different domain email address (particularly a non corporate one) and you should find it will work as expected.
I also suggest never using <p> tags in email and using double <br> tags between paragraphs and <br> or <br> for top and bottom 'padding' within table cells.
Related
Im having some difficulty. Im trying to have my email be responsive in outlook clients but its just not having it - It wants a set width in pixels but when I do this it looks rubbish in outlook mobile but most frustratingly it looks rubbish in GMAIL because the percentages have been removed.
Is there anyway to get around this? Specifically I want my image to be 100% width with a max width of 600px.
<tr container">
<td class="content">
<img width="100%"
src="imagelink" />
Generally what you want is the width attribute for Outlook, e.g. width="600", and the style attribute, which Outlook ignores, set to width:100%.
i.e. <img width="600" style="width:100%;max-width:600px" src="..." />
Not sure why your percentage is removed in Gmail - but perhaps because your stray quote mark here <tr container">. The other possibility (only guessing because you've only posted part of your code) is that you have not inlined the code. Some email clients do not respect embedded CSS, so you can't rely on it. You can use this tool to fix: https://inliner.cm/
While I have added inbox preview text for MailChimp, I would like to stop it also showing the 'view this email in your browser text' in the inbox preview text.
Is there a way to hide text from inbox preview in an html template for Mailchimp?
To fix this you will need a pre-header. A pre-header is a line of code you place just after the <body> opening tag which hides whatever is in it visually. Doing this - you can have what you want to display in the email preview without taking in any of the miscellaneous content (for example view in browser links).
<!--[if !mso]><!-->
<span style="display:none !important; visiblility:hidden; opacity:0px; color:transparent; height:0px; width:0px; mso-hide:all; max-height:0px; max-width:0px; line-height:0px; overflow:hidden;">Type your teaser content here.</span>
<!--<![endif]-->
In the above example of a preheader, you can see many different things going on. First up we have the <!--[if !mso]><!--> snippet. This will ensure anything encased between that and the <!--<![endif]--> statement will not be rendered in a Microsoft client. This is done because of Outlooks limited CSS support.
Next, we have a span stag with various CSS elements to hide the content within it. Then contained within the span tags is the content you'd want to appear in the preview of the email client.
I want to style a contact email, but I have a few problems:
I sent a test-mail to my gmx mail and it removed the style="background: url('...') center center no-repeat; position: relative;". In the received code I only see style="position: relative;"
Like the first problem, but with "background-size: cover;" and "width: calc(50% - 3px);"
My <style> - tag got commented and looks like this:
Commenting CSS like that does not prevent it working - it just ensures the browser does not treat it as HTML.
gmail strips all classes and ids from HTML, so nothing you put in your style sheet based on those will work anyway. You can style standard elements though, and inline styles still work.
Outlook doesn't support background images at all, so you should probably give up on this path.
I am creating an email template which has to display images from external website. I had placed some <img> tags for rendering the images and there are some <td> tags with background-image property set in inline css of the elements.
Now, when an email is received in outlook, the images are not displayed (this is expected as the images are not embedded). And I click the download images to see the images properly. The images in <IMG> tag are only shown and the background-image for the <TD> is not rendered.
Any views on solving this problem?
Thanks!
At last I found the answer.
Outlook 2007 does not use the Internet Explorer's rendering engine for loading HTML content. Instead it uses Word 2007 HTML and CSS capabilities.
Because of this CSS attributes such as background-image is not supported. And hence it's not possible to set a background image for HTML elements in outlook using standard CSS tags.
More info is available at http://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx
Background images are not supported in Outlook. As a best practice, you should never use background images in HTML emails. If you must have a background, you can use and image PLUS a solid color. Those with email clients that support background images will get the images, and those that don't support it will fall back to the solid color.
There is actually a method to use background images in HTML emails in Outlook.
As Chaitanya mentions it can't be done with CSS, but it can be done via VML.
The technique is a bit more involved than using background: url(....) and I don't use it as frequently as I would use the CSS technique (if it worked in Outlook). But it is very useful.
I've used it successfully on a number of campaigns.
Full instructions here: including a list of email clients that support this technique.
http://www.campaignmonitor.com/forums/viewtopic.php?pid=14197
Also, here's a guide from Campaign Monitor: http://www.campaignmonitor.com/css/ which proved super helpful for me.
There is a way of displaying HTML images.
Right html emails rendered as MSWord document in outlook.
I got the solution from this https://stackoverflow.com/a/12693917/413032 post.
So we need an alternate.
In fact you may open your html email in MSWORD and finding what seems wrong and considering what can be an alternate gives idea.
Here is what I did ;
Added v namespace to html tag
< html xmlns:v="urn:schemas-microsoft-com:vml"
Added v's style to head block
< head >
<style type="”text/css”">
v\:* { behavior: url(#default#VML); display:inline-block}
</style>
In table or where you need add your MSWord alternate
<table style="background-image: url('https://e-telesaglik.com/images/email/canvas-bg.jpg');background-repeat:no-repeat;" cellpadding="0" width="960">
<!--[if gte vml 1]>
<v:shape
stroked='f'
style='position:absolute;margin-left:-90pt;margin-top:-1.55pt;
z-index:-503306481;
visibility:visible;
width:720pt;
height:475pt;
top:0;
left:0;
border:0;
'>
<v:imagedata src="https://e-telesaglik.com/images/email/canvas-bg.jpg"/>
</v:shape>
<![endif]-->
<tbody> ....
That is all.
Sure it will be a MSWord render. And more, as you notice we use absolute positioning...
Anyway this is a workaround and solves the issue in a way.
We hope one day MS-Outlook renders html e-mails with a web browser not with MS-Word.
This works in Gmail,
I tried this to show div with image in email newsletter, try inline css, sending email guidelines here
My current project involves working with a document editor that, for better or worse, is implemented using mshtml and setting contentEditable to true. We're certainly considering replacing this setup with something else, but for the moment assume it is not an option.
In case it matters, we're doing this using VS 2008 (.Net 3.5) & C#:
document = (HtmlDocument)this.editorWebBrowser.Document;
body = (HtmlBody)document.body;
body.contentEditable = true;
We'd like to hide most of the structural editing behind our UI, but let the user edit the text any way they like. The problem arises when we add a div with any of several styles:
(Adding a body tag to simulate what we're doing programmatically, so you can test in IE, but remember we're working in C#/.Net/VS.)
<BODY contentEditable="true">
<DIV class="intro" style="border: 1px solid blue; width=100%;">
<P>My Intro</P>
</DIV>
<P>Other Text</P>
</BODY>
There are two things wrong with this:
The first click by the user selects the div. We'd like the click to go straight to the text, and never let the user see the resize handles.
If the user places the cursor in Other Text then tries to move to the div text using the keyboard, they're prevented. The div is treated as one character when you are outside of it moving around.
So, effectively, is there any way to make the div behave like just a background decoration, but have everything around it still be editable? This html is completely internal, so we can do anything with it we like. So the div itself doesn't matter. What matters is that we:
Contain several P or other tags
Show the user visually that all the contained P or other tags are part of one group, as styling like border & background color on the current div accomplish now.
This SO question makes me worried that what I want isn't possible with our current setup, but I ask to help anyone else who stumbles on a similar problem. I'll be adding a couple imperfect solutions we've come up with in a moment.
Possible or not, thanks for any thoughts you might have.
Partial solution: Set a containing div to contentEditable=false, then true again on an inner element, like so:
<BODY contentEditable="true">
<DIV class="intro" contentEditable="false" style="border: 1px solid blue; width=100%;">
<P contentEditable="true">My Intro</P>
</DIV>
<P>Other Text</P>
</BODY>
This possibly solves problem 1 (user selecting the div) but does nothing about problem 2.
Since the HTML is internal and doesn't need to play nice with anything else, just represent the area with a table, rather than a div:
<table class="intro">
<tbody>
<tr>
<td>
Intro
</td>
</tr>
</tbody>
</table>
This solves both problems, but significantly complicates the code for editing or parsing. We'd prefer a cleaner solution.