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 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?
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");
}
I'm generating a html email that uses an internal stylesheet, i.e.
<!doctype html>
<html>
<head>
<style type="text/css">
h2.foo {color: red}
</style>
</head>
<body>
<h2 class="foo">Email content here</foo>
</body>
</html>
When viewed in Gmail it seems all the styles in the internal stylesheet are ignored. It seems Gmail ignores all styles other than inline rules, e.g.
<h2 style="color: red">Email content here</foo>
Is this my only option for styling HTML emails when viewed with Gmail?
Use inline styles for everything. This site will convert your classes to inline styles: http://premailer.dialect.ca/
The answers here are outdated, as of today Sep 30 2016. Gmail is currently rolling out support for the style tag in the head, as well as media queries. If Gmail is your only concern, you're safe to use classes like a modern developer!
For reference, you can check the official gmail CSS docs.
As a side note, Gmail was the only major client that didn't support style (reference, until they update anyway). That means you can almost safely stop putting styles inline. Some of the more obscure clients may still need them.
Gmail started basic support for style tags in the head area. Found nothing official yet but you can easily try it yourself.
It seems to ignore class and id selectors but basic element selectors work.
<!doctype html>
<html>
<head>
<style type="text/css">
p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}
</style>
</head>
<body>
<p>Email content here</p>
</body>
</html>
it will create a style tag in its own head area limited to the div containing the mail body
<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>
I agree with everyone who supports classes AND inline styles. You might have learned this by now, but if there is a single mistake in your style sheet, Gmail will disregard it.
You might think that your CSS is perfect, because you've done it so often, why would I have mistakes in my CSS? Run it through the CSS Validator (for example http://www.css-validator.org/) and see what happens. I did that after encountering some Gmail display issues, and to my surprise, several Microsoft Outlook specific style declarations showed up as mistakes.
Which made sense to me, so I removed them from the style sheet and put them into a only for Microsoft code block, like so:
<!--[if mso]>
<style type="text/css">
body, table, td, .mobile-text {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
This is just a simple example, but, who know, it might come in handy some time.
Note that services and tools for sending emails may be able to inline your CSS for you, allowing CSS in <style> tags to work in Gmail.
For instance, if you're sending emails with MailChimp, your CSS from <style> tags will get inlined automatically by default. With Mandrill, you can enable this functionality (although it's disabled by default for performance reasons) by checking the "Inline CSS Styles in HTML Emails" box in the "Sending Defaults" section of the Settings tab:
As others have said, some email programs will not read the css styles. If you already have a web email written up you can use the following tool from zurb to inline all of your styles:
http://zurb.com/ink/inliner.php
This comes in extremely handy when using templates like those mentioned above from mailchimp, campaign monitor, etc. as they, as you have found, will not work in some email programs. This tool leaves your style section for the mail programs that will read it and puts all the styles inline to get more universal readability in the format that you wanted.
I had the same problem while designing a template in Mailjet. Solution of the problem was minified CSS code inside <style> tags.
#shawn did give an example how to use a combination of styling in the head section together with inline styling. Some email clients (Outlook, Gmail, etc.) have tricky things, these can be fixed with css in the head style.
The extra table <table width="580"> is for Outlook to solve 'width' problems and also to center the layout.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="border:none;" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<base target=_blank href="http://">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="x-apple-disable-message-reformatting"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telephone=no"/>
<title>
</title>
<link href="https://fonts.google.com/specimen/Open+Sans#standard-styles" rel="stylesheet" type="text/css"/>
<style type="text/css">
.ReadMsgBody { width:100%;background-color:#eeeeee }
.ExternalClass { width:100%;background-color:#eeeeee }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height:100% }
a[x-apple-data-detectors] { color:inherit !important;text-decoration:none !important;font-size:inherit !important; font-family:inherit !important;font-weight:inherit !important;line-height:inherit !important }
div[style*="margin: 16px 0"] { margin:0 !important }
body { margin:0;padding:0;font-family:'Open Sans','Verdana',Geneva,sans-serif;-webkit-text-size-adjust:none;-ms-text-size-adjust:none }
#outlook a { padding:0 }
.yshortcuts a { border-bottom:none !important }
table,td { mso-table-lspace:0pt;mso-table-rspace:0pt }
table,tr,td { border-collapse:collapse }
tbody { width: 100% }
p,a,li,blockquote { mso-line-height-rule:exactly }
li { mso-margin-top-alt:0;mso-margin-bottom-alt:0 }
#media screen and (min-width: 600px) {
table.container {width: 580px !important; margin: 10px auto !important }
div.fullwidth { width: 580px !important }
div.halfwidth { width: 290px !important }
}
</style>
<!--[if gte mso 11]>
<style type="text/css">table {border-spacing: 0;}table td {border-collapse: separate;}</style>
<![endif]-->
<!--[if !mso]><!-->
<style type="text/css">table{border-spacing:0} table td{border-collapse:collapse}</style>
<!--<![endif]-->
<!--[if gte mso 15]>
<xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
<![endif]-->
<!--[if gte mso 9]>
<xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
<![endif]-->
</head>
<body bgcolor="#ffffff" style="width:100%; margin:0px; padding:0px; border:0px; -webkit-text-size-adjust:100%">
<!-- BODY TABLE -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:100%; border-collapse:collapse; border-spacing:0; margin:0 auto; padding:0; border:0; background-color:#ffffff">
<tr>
<td width="100%" align="center" valign="top" style="padding:0px !important; border-collapse:collapse; border-spacing:0; border:0px; text-align:center; vertical-align:top; -webkit-text-size-adjust:100%;">
<!-- WRAPPER TABLE -->
<!--[if (gte mso 9)|(IE)]>
<table width="580" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td>
<![endif]-->
<table class="container" width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; max-width: 580px; margin: 0 auto; background-color: #ffffff; border:1px solid #e7e7e7">
<tr>
<td class="font0" align="center" style="padding: 0 !important; font: normal 0px/0px sans-serif !important; font-size: 0px !important; border-collapse: collapse; border-spacing: 0; border: 0; text-align: center; vertical-align: top;">
<!-- EACH CONTENT ROW AS BELOW -->
<!--[if (gte mso 9)|(IE)]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td>
<![endif]-->
<div class="fullwidth" style="width: 290px; display: inline-block; vertical-align: top;">
<table width="100%" style="border-collapse: collapse; border-spacing: 0;">
<tr>
<td style="padding: 20px 10px 0px 10px; font: normal 12px/16px sans-serif; color: #555454; text-align: left; -webkit-text-size-adjust: 100%;">
YOUR CONTENT HERE
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
<!-- END WRAPPER TABLE -->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
<!-- END BODY TABLE -->
</td>
</tr>
</table>
</body>
</html>