What do I need?
I need to make all content of the email into a single A4 size Page.
CSS
<body style="height:297mm;width:210mm;margin-left:auto;margin-right:auto">
----email content---
</body>
when i try to viewsource email css property were already there.
Problem
when try to print from ms outlook then html content move in 2 page of which my need is 1 page.
working css in browser
when i try to print the same content from browser then im able to get html content in A4 size page.
can anyone suggest how to shrink all content into single a4 size page.
any suggestion is most welcome.
Stop looking for a reason : mail clients are very though regarding CSS properties.
When you write an e-mail, almost no CSS property is accepted.
You can find an exhaustive list here.
After having played around with it a little bit, I can tell you that the best option to send a formatted mail is to create a table and style this table with inline styling.
Good luck with that, you will need it.
I suggest you to write styles in pixels. I have a such big experience in Email markup and Microsoft Outlook really harmful.
And Im not sure that margin: auto will work properly in Outlook.
So, try to write for example:
<body style="height:500px;width:500px;">
The Solution that worked for me In Ms Outlook.
<div>
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-
microsoft-com:office:word" href="http://" style="yourstylinghere;"
stroke="f" fillcolor="#556270">
<![endif>
your content
<!--[if mso]>
</v:rect>
<![endif]-->
</div>
Related
I need to make a rounded button for a newsletter, the HTML code is insert in a web base tool used for newsletter
most of the contents are ok but a yellow button with rounded corner on windows 10 mail client lose the rounding and the padding
I try to use different tags like button or change to display block and use the prefixed css style without any success
If is not possible i we will use some images
<p><span style="display:inline-block; background-color:#ffce00; padding: 10px 45px; border-radius:20px; color: #000; font-weight: bold;">Click</span></p>
you can try something like this below (I've tested successfully this type of code in MS outlook), the trick is the VML attribute arcsize
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="50%" stroke="f" fillcolor="#ff0000">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://"
style="background-color:#ff0000;border-radius:20px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Click</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
Source and Generator
Getting CSS to appear correctly in mail clients is a bit of a pain. When I was doing this type of work we used this compatibility chart before we made formatting decisions.
[https://www.campaignmonitor.com/css/]
Another good tool is Litmus to check formatting between clients is Litmus.
[https://litmus.com/]
Wish I had a better answer for you, hope this helps.
I understand that in order to display outlook-specific HTML within an email I can implement code such as:
<!--[if (gte mso 9)|(IE)]>
Welcome to the newsletter.
<![endif]-->
However, how do I implement if/else logic. For example, without using CSS classes, I need to display one section of content in Outlook and a completely different section of content in other clients.
Is this possible?
(CSS Classes have proven to be unreliable hence my requirements for conditional HTML instead).
The conditional coding IS actually the IF/ELSE statement. The issue is the ELSE part is not built in. To solve your issue, you need something to hide the content you no longer want MSO to use but show up in all other clients.
This can be handled either through conditional classes (in the if statement) OR, as you mentioned you did not want to use classes, you can use the mso-hide:all css that is only recognized by Microsoft office.
Found a great example of this for reference. Pulled from this post:
<!--[if mso]>
<v:shape>...</v:shape>
<div style="width:0px; height:0px; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
<![endif]-->
[fallback goes here]
<!--[if mso]></div><![endif]-->
This is a good reference on usage of mso-hide:all
working on an e-mail template i noticed outlook and outlook.com strips out "margin", my solution is to add additional line for those clients like
<td height="20" valign="top"> </td>
but i would like to use margin on supported clients, so i put this in a conditional block
<!--[if mso]>
<td height="20" valign="top"> </td>
<![endif]-->
Anyone knows if ALL versions of outlook are stripping out margin or is it just some of them (newer ones?)? I read Microsoft dropped support for margin, but I didn' find any information in which version it was dropped.
do i have to use additional condition to avoid older versions of outlook rendering margin like
<!--[if (gte mso 12)]>
to only affect 2007+ for example?
Don't do that -- the idea is you find a solution for the margin that resolves everywhere your supporting. Do not hack or try to condition an email!
margin is not supported in Outlook but, padding is, so use padding!
There is also additional reach arounds you could utilize such as nesting additional tables or using small white images to recreate the space. There is always a solution that you can use across - your email will be much more stable if you find it instead of trying to hack with conditionals.
Also this is a decent reference.
Specific to outlook 2007 info.
But if you really must (sigh).. it is possible; the below is targeting Outlook 2007 specifically:
<!--[if gte mso 12]>
<style type="text/css">
/* Your Outlook-specific CSS goes here. */
</style>
<![endif]-->
the mso 9 correlates with outlook 2007 below is a list of more:
Outlook 2000 - Version 9
Outlook 2002 - Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15
Read More about this.
Note: While this is possible, I still suspect using these will create more problems in the long wrong.
Good luck!
As per the EmailonAcid Article Outlook.com DOES Support Margins.
The fix for this is ridiculously simple. All you have to do is capitalize the "M" in Margin. That's right, changing all of your "margin" to "Margin" will cause them to work properly in Outlook.com.
I've put togethor a simple html email where X 'td' has background images, coded as below...
<td bgcolor="#FFFFFF" width="47" height="661" style="background-image:url(http://mysite.com/_includes/emails/invoice/images/l.jpg); background-repeat:repeat-y;">
 
</td>
My problem is that in Outlook the style isnt applied, from what I've found there's nothing wrong with my code, has anybody any idea?
Thanks
They're not supported.
For a handy reference, see: http://www.campaignmonitor.com/css/
Outlook actually uses the craptacular MS Word rendering engine for HTML. The bane of every email campaign designer.
I have a site here: bgflirt.com
On the right side of the pictures in the middle is a div tag that shows nothing in everything but firefox. There is a flash object over there and a "test" string. Any ideas why it doesn't show in IE and Chrome ?
First thing, try to load flash object with SWFObject. It makes it easier to embed flash animation into your page and takes care about browsers problem.
Second thing, you got this in your code just before your swf insertion :
<div class="entry">
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Normal</w:View>
<w:Zoom>0</w:Zoom>
<w:TrackMoves/>
<w:TrackFormatting/>
<w:HyphenationZone>21</w:HyphenationZone>
<w:PunctuationKerning/>
<w:Valida… Още..
</div>
You use a strict doctype. It can lead to problem depending on browser.