I have the following condititonal to apply styling to outlook clients only
<!--[if mso]>
<style>
.myClass{
color: #000000 !important;
}
</style>
<![endif]-->
I've also tried:
<!--[if if gte mso 9]>
If I remove the condition the styling is applied. I've tried removing any other styling on the page and that doesn't resolve it.
I am testing it on Outlook 2013 as part of office 365 (screenshot of outlook info)
In your example, you have spelt the CSS property color as "coloir" - are you sure it is not due to this?
Related
I have an template email, it actually working with Outlook from Office 2013, 2019 and 365 but i have an issue with Outlook Exchange 2016 : The <!--[if mso]> condition is not apply.
This the the code that is not apply :
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: 'Montserrat', sans-serif;
color: black !important;
}
</style>
<![endif]-->
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true">
<v:fill type="tile" size="100%,100%" src="cid:{{ myBackground }}" color="#fff"/>
</v:background>
<![endif]-->
I don't understand why this doesn't work on this specific version of outlook :(
Does anyone has the answer ?
I m using html/css templates to send emails and I want to override inline styles provided by users for all images
This code is working fine in IE/chrome but not in outlook:
<head>
<!-- [if qte mso 9]>
‹style type="text/css">
#emailContent img[style] {width: 300 !important; height:auto !important;}
</style>
<![endif]-->
</head>
any help on this ?
I'm successfully hiding target content on Outlook.com, Office 365 for Windows, and Outlook 2016 for Windows with the following code:
<style>
[id="x_hide-outlook"]{
display:none !important;
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
#hide-outlook {
display: none;
}
</style>
<![endif]-->
<div id="hide-outlook"><h1>HIDDEN IN OUTLOOK/OFFICE 365</h1></div>
The above code doesn't work to hide email content for macOS versions of Office 365 and Outlook 2016 specifically (works on Windows versions).
Has anyone run into a macOS specific issue with the above logic / any solutions?
macOS Outlook renders emails differently, however, there is another way to target it. Thanks to Mark Robbins' work I was able to hide it for you via this code:
<head>
<style>
[id="x_hide-outlook"]{
display:none !important;
}
_:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root .body:not(.Singleton) #hide-outlook {
display:none !important;
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
#hide-outlook {
display: none;
}
</style>
<![endif]-->
</head>
<body class="body">
<div id="hide-outlook"><h1>HIDDEN IN OUTLOOK/OFFICE 365</h1></div>
</body>
Note the class="body" on the <body> tag - this is necessary.
See Litmus sample results here: https://litmus.com/checklist/emails/public/faeec7e
I have the following html, if i open it up on browser it works fine..but when i send it as a mail to my outlook 2013, i dont see the background..
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
</head>
<body style='background-image: url("http://postimg.org/image/t6abf7srn/");background-repeat:no-repeat'>
</body>
</html>
I have tried options 1 and 2 given at this link : http://blog.mailermailer.com/email-design/background-images-in-html-email-the-naked-truth
Have tried the solutions at below link as well:
1) http://blog.mailermailer.com/email-design/bulletproof-email-background-images-fact-or-fiction
2) http://backgrounds.cm/
but no luck.
Just adding my VML addition as well, which doesnt seem to be working too:
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Untitled Document</title>
</head>
<body style='background-image: url("http://postimg.org/image/t6abf7srn/");background-repeat:no-repeat'>
<!--[if gte mso 9]>
<v:background fill="t">
<v:fill type="tile" src="http://www.example.com/background_image.jpg" />
</v:background>
<![endif]-->
</body>
</html>
HTML in Outlook is rendered by Word, not IE. And Word does not support background images in HTML.
you are pointing to a document, not an image file in your css. add the image's url instead, like this:
<body style='background-image: url("http://s21.postimg.org/ko0vavm93/image.jpg");background-repeat:no-repeat'>
however like #Dmitry Streblechenko said about support, i know outlook reverted back awhile ago and stopped supporting them. not sure about 2013 support.
i would slice that image into table pieces :)
are you sure you've added the vml xmlns into your html tag?
<html xmlns:v="urn:schemas-microsoft-com:vml">
I haven't had trouble with the snippet CM provided (placed at the top of the body)
<!--[if gte mso 9]>
<v:background fill="t">
<v:fill type="tile" src="http://www.example.com/background_image.jpg" />
</v:background>
<![endif]-->
EDIT!!
Turns out you don't even need VML for outlook body backgrounds.
<body style="margin:0px; padding:0px;" bgcolor="#0088cc" background="http://imagez.biz/bkg.png">
Assuming the following code:
<div class="content">
<div style="background:url(swoosh.jpg) no-repeat; background-size:100% 100%;" class="top">
<div style="height:42px; align:center;" id="logo">
My goal is to make the div with the background swoosh.jpg be a simple div with class=top
I have tried getting the conditional to work myself, however for some reason (syntax?) it is not working properly.
The following is what I have tried
<div class="content">
<!--[if !IE]>
<div class="top">
<![endif]-->
<!--[if IE]>
<div style="background:url(swoosh.jpg) no-repeat; background-size:100% 100%;" class="top">
<![endif]-->
I should mention that I cannot use anything other than inline CSS for this application - and have no access to the header.
I think this is how to do what you want but as previously stated, it's not the best way of doing things if you have other options (tested in IE9 - IE10 doesn't work with conditional statements):
<![if !IE]>
<div class="top">
<![endif]>
<!--[if IE]>
<div style="background:url(swoosh.jpg) no-repeat; background-size:100% 100%;" class="top">
<![endif]-->
http://jsfiddle.net/APFZh/2/
IE 10 targeting requires a little JS:
<![if !IE]><!--<script>
if (/*#cc_on!#*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->
This appends a class of “ie10” to the html element but you could write whatever you want to the document
http://www.impressivewebs.com/ie10-css-hacks/
Try adding
<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
To the top of your HTML doc. Then use CSS like this
.content {
color:red;
}
.ie6 .content {
color:blue;
}
.ie7 .content {
color:green;
}
This way you can keep all of your CSS in one file and your IE classes next to the non IE classes.
Check out this doc from Paul Irish
It would be better practice to just have the div with class="top" but set different styles for it in a separate IE stylesheet as using inline CSS is not recommended.
Put this in the HEAD of your page:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->
As to it not working I'd suggesrt making sure you have a valid DOCTYPE at the top of your page as IE is very fussy about that.
An update if somebody still reaches this page, wondering why the ie targeting doesnt work in recent IE browsers. IE 10 and onward no longer support conditional comments. From the MS official website:
Support for conditional comments has been removed in Internet Explorer
10 standards and quirks modes for improved interoperability and
compliance with HTML5.
Please see here for more details: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
If you desperately need to target ie, you can use this jquery code to add a ie class to and then use .ie class in your css to target ie browsers.
if ($.browser.msie) {
$("html").addClass("ie");
}