I'm trying to make an email with two links, I want to show one in Gmail only, and the second one in outlook only.
I did some search and I found that I need to use mso-hide in Outlook and display none it's enough on Gmail. none of those work. display none hide my element in outlook and Gmail and mso-hide didn't affect.
My try is:
<!--[if !mso 9]><!-->
<div style="mso-hide:all">
Content 02
</div>
<!--<![endif]-->
<div style='display: none;'>
Content 03
</div>
is there a solution to hide an element only on Outlook and the same with Gmail?
Dylan Smith has written an excellent 'How to Target Email Clients' page that goes through all known techniques for different email clients. https://howtotarget.email/
Using that, we can get the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<style type="text/css">
u + .body .gmailshow {
display:block!important;
}
</style>
</head>
<body class="body">
<div>CONTENT EVERYWHERE</div>
<!--[if mso | ie]>
<div>
Content OUTLOOK only
</div>
<![endif]-->
<div class="gmailshow" style="display: none;">
Content GMAIL ONLY
</div>
</body>
</html>
Notes:
The body, since it gets turned into a div, requires a class (here, body)
There was something wrong with your Outlook if statement, make sure you check that
There is no known way to get the Gmail targetting to target Gmail IMAP, since it does not regard <style> blocks (this is but one version of Gmail - standard Gmail apps and Gmail webmail work with this technique)
Related
I'm trying to make a responsive email template that works with outlook. The outlook HTML works fine and the responsive HTML also works fine.
I've made use of media queries for the responsive portion, but now whenever an email is sent to Outlook the content is duplicated.
My HTML is set up as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width initial-scale=1">
<style> //Media Queries are here </style>
</head>
<body>
<!--[if gte mso 12]>
//All of the Outlook HTML is held here
<![endif]-->
<!--[if gte mso 12]>
<div style="width:0px; height:0px; overflow:hidden; display:none;
visibility:hidden; mso-hide:all;">
<![endif]-->
//All of the none Outlook HTML is held here
<!--[if gte mso 12]></div><![endif]-->
</body>
</html>
What I want to happen is that the top portion will run whenever an email is sent to outlook and if it's any other client to use the other portion of HTML.
I know this isn't the best way to do this as really I should just show and hide portions of the code instead of the whole thing, but this was easier to put together.
Interestingly this only started occurring when I started making use of media queries instead of stating the same VW for all resolutions.
Any help would be appreciated.
So my solution to this problem was to add style="mso-hide:all" onto every tag that was held within the second block.
Use mso-hide:all in portion you want to hide for outlook, which makes the portion hidden for Outlook specific client.
I send an email but Gmail don't read my html head.
I need to use from #font-face.
I send this HTML:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Title</title>
<link href="http://myAddress.com/style.css" rel="stylesheet" />
</head>
<body>
<h1 class="style1">Hello</h1>
</body>
</html>
I want to see this:
image is here
but i see this:
image is here
Gmail's CSS support is very... limited to say: The Ultimate Guide to CSS. So you are probably out of luck here and need to rewrite the code.
Also see Understanding Gmail and CSS: Part 1 for more details on how to solve this. You need to inline all your CSS, but there are tools available.
I was validating my moodle website with the w3c validation service. in it, there is this code that caused a lot of problems:
<!DOCTYPE html>
<html dir="ltr" lang="en" xml:lang="en" class="yui3-js-enabled">
<div id="yui3-css-stamp" style="position: absolute !important; visibility: hidden !important" class=""></div>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Course: Program 1 :title</title>
<meta name="keywords" content="moodle, xxxxxxxxx">
<script async="" src="./test_files/analytics.js"></script><script type="text/javascript">
my question is, can a div tag be inside a tag, but not in a body??
No it can not - it is not proper HTML,
of course it will still work in almost any browser , as most modern browsers are very lenient with improper HTML
It looks like you have it positioned absolutely, maybe I'm assuming because you want it way up on top above anything else. Don't worry - you can still accomplish this behavior inside the <body> tag
While HTML is a flexible and browsers are forgiving, HTML does specify a basic structure. Content in the header contains meta data about the page, as well as resources like CSS the browser should get. The part of the document tree used by the browser to paint the web page should be based on content in the body tag.
Here is a revised sample of your markup to show one way to improve it.
<!DOCTYPE html>
<html dir="ltr" lang="en" xml:lang="en" class="yui3-js-enabled">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Course: Program 1 :title</title>
<meta name="keywords" content="moodle, xxxxxxxxx">
<script async="" src="./test_files/analytics.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<div id="yui3-css-stamp" style="position: absolute !important; visibility: hidden !important" class=""></div>
</body>
</html>
Answer is No its improper way of doing it The page may or may not break depending on browser
No, div tag must be inside body tag.
The following HTML, when displayed in Internet Explorer 7/8/9 displays the date as:
2011/31/05
In other modern browsers, it displays as:
05/31/2011
The data is generated/stored by a database, so we can't easily modify it. We'd rather also not do browser detection to try to "fix" the issue. It's clear IE is doing this intentionally, however, we'd like to disable the feature somehow as it's not consistent with other browsers. Microsoft Word apparently does something very similar with RTF documents with the same data. So, it's not a "bug" per se, but we'd still like to avoid it and show the date as we embedded it. It also does this for numbers such as 1/2.
When I remove the hex entity: ف preceding the date, the behavior stops. But the text could be a date embedded in an Arabic sentence, so we'd rather it not "auto flip" the dates, potentially causing serious misunderstanding when reloaded later.
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
</head>
<body>
<div align="right" dir="rtl">
<span dir="rtl">
<span style=" font-size:12pt">
ف 05/31/2011ظ
</span>
</span>
</div>
</body>
</html>
You could wrap the date in a span and specify the direction:
ف <span dir="ltr">05/31/2011</span>ظ
Wrap it in <pre> to keep the format as-is.
<pre>05/31/2011</pre>
You'll have to style pre in css to match your current fonts and size though.
pre {
font-family:inherit;
font-size:inherit
}
Given the following beginning of an HTML email body, how old is their version of Outlook? How can we determine the Outlook release date when we receive version numbers similar to these? (I assume this is Outlook or one of the variants like Windows Mail or Outlook Express).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content="MSHTML 6.00.6002.18332" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#ffffff>
<DIV><FONT face=Arial size=2>...........
..............................
..............................
..............................
There is a unicode byte order marker at the beginning of the body.
It does not look like outlook at all.
Found this
http://en.wikipedia.org/wiki/Trident_%28layout_engine%29
http://www.webmasterworld.com/html/3147495.htm
indicating that it's the rendering engine from IE that geneerated this header.