I am trying to use two conditional statements in HTML email template. The statements are testing for the MS Outlook client, if true it will render an image, otherwise it will hit the next statement to test if the client is NOT MS Outlook, then render some separate HTML.
<!--[if mso]>
...
<!--<![endif]-->
<!--[if !mso]><!-- -->
...
<!--<![endif]-->
This works great for the majority of Outlook desktop clients, however Outlook 2003, 2011 and 2016 (mac) seem to be ignoring the if mso statement. The other issue that I have here is that Outlook.com doesn't seem to recognise this statement either.
I was wondering if anybody else had come across this issue in the past and if so what was their solution around this? I imagined the if mso statement would pickup any form of Outlook client but my assumption seems to be wrong.
Any help would be appreciated :)
Cheers!
Outlook for Mac (at least the 2016 release) uses Webkit to render content rather than the MS Word engine that most Windows versions of Outlook used. The good news here is that you don't need to jump through as many hoops to get it to render things 'correctly'. The bad news is that that's why [if mso] doesn't work here.
Outlook.com appears to strip all conditionals, which is why you're not seeing the image there either.
Probably not the news you are after, but hope it helps.
This is what I use:
In the html type:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
in the CSS:
#outlook a{
padding:0;
}
.ReadMsgBody{
width:100%;
}
body{
width:100% !important;
min-width:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
.ExternalClass{
width:100%;
}
td{
border-collapse:collapse !important;
}
v*{
behavior:url(#default#VML);
display:inline-block;
}
.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{
line-height:100%;
}
and wrapping any conditional rules in the BODY of the html I use:
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" SOME OTHER RULES">
<v:textbox inset="0,0,0,0">
<![endif]-->
<table>Some other HTML elements</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
Related
I'm trying to get a circular image to appear in an HTML email. So far it's working in all clients except for Outlook 2013 and Outlook 2016 (Windows 7).
I found some VML tutorial that says this should do the trick:
<v:oval style="width:100;height:100">
<v:fill src="https://www.placebear.com/100/100.jpg" type="frame">
<v:/fill>
</v:oval>
However I tried it with conditional comments
<!--[if !mso]><!-- -->
<v:oval style="width:100;height:100">
<v:fill src="https://www.placebear.com/100/100.jpg" type="frame">
<v:/fill>
</v:oval>
<!--<![endif]-->
and nothing appeared.
Anybody have a working solution? Border-radius is doing the trick for every othe client but Outlook, because of course...
I'd suggest changing your Outlook conditionals to this.
<!--[if (gte mso 9)|(IE)]>
<![endif]-->
Currently, you are hiding it from Outlook. If the VML proves too troublesome I'd recommend using a rounded image asset on a transparent background.
So basicly I made a html email that looks like this:
<html>
<head>
...
</head>
<!--[if mso ]>
<body>
<p>Hello world, its Outlook!</p>
</body>
<![endif]-->
<!--[if !mso ]>
<body>
<p>Hello world, its NOT Outlook!</p>
</body>
<![endif]-->
</html>
Now here is the problem, when I open the mail with Outlook correct body tag with its children is rendered which is correct "Hello world, its outlook!".
But when I open the mail with Gmail or Hotmail its blank nothing is displayed..
Whats the problem? And how can I make sure that the "NOT Outlook" body tag and its children is displayed if its not outlook and if it is Outlook how can I display the first top body tag with its children in same html markup?
Correct answer:
<!--[if mso ]>
...
<![endif]-->
<![if !mso ]>
...
<![endif]>
I am trying to get my website showing properly on ie6 and ie7 and they say that you must put use this statement:
<!--[if IE 6]> <link href="ie6.css" rel="stylesheet" type="text/css"> <![endif]-->
Now where do I put this statement in my HTML page?
EDIT:
So I've added this just after the doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--[if lt IE 7]><html class="ie6" lang="en"><![endif]-->
<!--[if IE 7]><html class="ie7" lang="en"><![endif]-->
<!--[if IE 8]><html class="ie8" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->
<head>
In my style sheet ie6.css I've got this:
.ie6 #magazine_style_left {
position:relative;
float:left;
width:150px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
color:#999999;
font-style:italic;
line-height:18px;
}
.ie6 #magazine_style_right {
position:relative;
float:right;
width:519px;
border-left: 1px solid #F2F2F2;
}
and I've added the css on the same page and it still isn't working. Its like its not picking up / using the ie6 css
inside the head tag
<head>
<!--[if IE 6]> <link href="ie6.css" rel="stylesheet" type="text/css"> <![endif]-->
</head>
It might help clarify things to mention this:
IE conditional comments, such as <!--[if IE 6]><![endif]--> can go pretty much* anywhere in the document. In the <head>, in the <body>, in an <li> element or <form>, etc. The content inside it (which can be anything*) will be rendered (or not) according to the rule used.
* There may be exceptions, but I'm not aware of any specific ones.
Knowing this, the question really boils down to "Where do I put a <link> tag", which is of course in the <head> as mentioned by the other answers.
There's another way to target IE, outlined here:
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
For sometime now, the standards community has rallied around
conditional stylesheets as a solution to the validation problem.
There are a few problems with it though:
Conditional stylesheets mean 1 or 2 additional HTTP requests to download
As they are in the the , the rendering of the page waits until they're totally loaded.
Also – Yahoo's internal coding best practices do not recommend conditional stylesheets
It can separate a single CSS rule into multiple files. I've spent a lot of time wondering "Where the eff is that rule coming from!?"
when it turned out to be tucked away in a conditional stylesheet.
Here's my proposed solution:
<!--[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]-->
Using the same conditional comments, we're just conditionally adding
an extra class onto the html tag. This allows us to keep our
browser-specific css in the same file:
div.foo { color: inherit;}
.ie6 div.foo { color: #ff8000; }
Plus it totally validates and works in all browsers.
I highly suggest this technique for attacking IE, definitely worth checking out.
Into the <head> next to your other CSS includes. That means of course that you have an ie6.css file that fixes IE6 specific problems.
You should put it inside the head tag, probably right after your other css includes, because where definitions clash, includes further down the head tag will override earlier definitions.
hi a i am triyng to using conditional css like this in my style sheet
div.box {
width: 400px;
[if IE 6] width: 600px;
padding: 0 100px;
}
i want to set a different width to my div in ie6 , so i am trying this code and not working , how can i set a different width in ie6
also i tried this in my style sheet
[if IE]
div.box {
width: 600px;
padding: 0 100px;
}
[endif]
Conditional comments are for use inside HTML documents, not inside CSS files. IE's HTML parser will interpret the rule inside the comment - as far as I know, there's no equivalent logic in its CSS parser.
The following code will work:
<!--[if IE 6]>
<style type="text/css">
div.box {
width: 600px;
padding: 0 100px;
}
</style>
<![endif]-->
In most cases, it's better to use the conditional comment to include an external stylesheet, rather than just wrapping a block of inline styles, like so:
<!--[if IE 6]>
<link rel="stylesheet" href="/css/IEpatches.css" type="text/css" media="screen" charset="utf-8"/>
<![endif]-->
Edited to specify IE6 only as requested in the question.
The best way to do conditionals for ie6 is to add a conditional include in the head of the html page like this:
<!--[if IE 6]>
<link rel="stylesheet" href="[something like style/ie6.css goes here]" type="text/css">
<![endif]-->
and then just add your new widths as exceptions to elements in the ie6.css style sheet.
Have you tried?
<!--[if IE]>
// Your conditional CSS
<![endif]-->
I think that your formatting is wrong for your conditional statement.
Conditional Comments
Have you read the Conditional-CSS documentation? Specifically, do you run your CSS through the Conditional-CSS compiler? Because if you don't, you'll just send the CSS to the browser unchanged - there is no way Conditional-CSS can do its magic then.
As you probably have learned by now, conditional comments are parsed in the HTML output, not within the CSS file itself, unless you are using third party software.
Another way you can target IE within your CSS files without hacks:
<!--[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]-->
It's become common to use variations of this technique for IE, I believe it was made popular by HTML5 Boilerplate. You are basically using conditional comments to add a class to the <html> tag (or body tag if you wish) so you can target elements in your CSS files like so:
.ie6 #header {
/* some ie6 only styles here */
}
To me, this is more maintainable than using separate stylesheets, but suffers the very mild setback of other browsers reading (but not applying) the IE styles.
I need some particular css for an html email, but only in outlook.
I'm looking for the outlook equivalent of
<!--[if IE]>body {background-color:red} <![endif]-->
<!--[if gte mso 9]
// This CSS will only be seen in Outlook 2007
![endif]-->