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]-->
Related
As known Outlook client (Win version) doesn't use div's so I have to use tables. In order to make responsive design, I'm trying to use the hybrid design (as mentioned here https://www.litmus.com/blog/mobile-responsive-email-stacking/)
The problem is that the outlook client (outlook365 on win10) just ignores every syntax of conditional comments, and gives me the same results as if it was Gmail.
I couldn't find any answer. Could it be that Microsoft just removed this feature from their mail client? or am I doing something wrong.
I'll appreciate any idea. Thank you.
This is the HTML I've sent to myself and I got only the lines saying "this is not mso" (both conditions were ignored (the positive and the negative).
<!--[if mso]>
this is mso
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
gte mso 9
<![endif]-->
<!--[if gte mso 16]>
this is mso 16
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
gte mso 9
<![endif]-->
<!--[if !((gte mso 9)|(IE))]><!-- -->
This is not mso 9\ie
<!--<![endif]-->
<!--[if !mso]><!-- -->
This is not mso
<!--<![endif]-->
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.
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]-->
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 have a Bootstrap ASP.NET MVC 4 project and look perfect across all browsers, except for IE 8 on Windows Server 2003.
When viewing the website the text <!--[if lt IE 9 !IE]><![endif]--><!--[if lt IE 9 !IE]><!--<![endif]--><!--[if lt IE 9 !IE]><![endif]--> actually appears on the page, so the browser is ignoring it.
HTML
<!--[if lt IE 9 !IE]>
#Scripts.Render("~/bundles/jqueryold")
<![endif]-->
<!--[if gte IE 9 !IE]><!-->
#Scripts.Render("~/bundles/jquery")
<!--<![endif]-->
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/freelance")
<!-- IE8 support for HTML5 elements and media queries -->
<!--[if lt IE 9 !IE]>
#Scripts.Render("~/bundles/ie9")
<![endif]-->
Any help resolving this issue would be much appreciated :-)
The problem is that !IE cancels out your conditional statement.
!IE means "target any other browser EXCEPT IE"
Just get rid of it
<!--[if lt IE 9]>
#Scripts.Render("~/bundles/jqueryold")
<![endif]-->
<!--[if gte IE 9]><!-->
#Scripts.Render("~/bundles/jquery")
<!--<![endif]-->
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/freelance")
<!-- IE8 support for HTML5 elements and media queries -->
<!--[if lt IE 9]>
#Scripts.Render("~/bundles/ie9")
<![endif]-->
Check here for more info.