Trouble concealing information in Gmail and Outlook, issue persists

I need to create an email with two different links, one to be visible only in Gmail and the other only in Outlook. I discovered that I should use mso-hide for Outlook and display none for Gmail, but neither seem to be working as expected. When I use display none, it hides my element in both Outlook and Gmail, and mso-hide doesn't have any effect. Here is what I tried:

<!--[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 another only on Gmail?

htmlcssemailoutlookhtml-email

Answer №1

Dylan Smith has created a fantastic guide on 'How to Target Email Clients' that covers various techniques for different email clients. Check it out here

By following his guide, we can implement the following HTML structure:

<!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>

Some key points to consider:

  • The body tag must be converted into a div with a class attribute (in this case, "body")
  • Double-check your Outlook conditional statement to ensure its accuracy
  • Gmail targeting may not work for Gmail IMAP as it doesn't support <style> blocks (this technique is primarily effective for standard Gmail apps and webmail)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Out of the blue div, could you lend your assistance?

I have a code that displays 5 random images with corresponding text. My challenge is that I want to separate the text into another div so that I can add another function to it, while still keeping the images random with their corresponding text. <scr ...

javascripthtmlcss

Event Triggering in CakePHP

I am struggling with the onChange event in this code snippet. I must have overlooked something because it's not functioning as expected. Can someone please point out my mistake? Your assistance is greatly appreciated: <td class="cellInput"> & ...

htmlcakephponchange

Troubleshooting the issue of autoplay not functioning in HTML5 audio

I'm facing a strange issue with my code - the autoplay feature for audio is not working as expected. Typically, whenever I insert this particular piece of code into a website, the music starts playing automatically. However, it seems to be malfunctio ...

javascriptcsshtmlaudio

I appear to be having issues with the pseudo-element. Is there something I am doing incorrectly? This relates to the first child

I initially tried to make the opening paragraph stand out by applying a red color, but unexpectedly, all elements on the page turned red. view image here <!DOCTYPE html> <html lang="en"> <head> <link rel="styleshee ...

htmlcss

Utilize jQuery to apply inline styles to dynamically created div elements

I am attempting to apply inline styles to a div using jQuery. The current state of the div, as seen in Firebug, is shown below: https://i.sstatic.net/rqhIc.jpg My goal is to retain the existing CSS while adding margin-left:0 and margin-right:0 to the cur ...

javascriptjqueryhtmlcsswordpress

You can eliminate the display flex property from the MuiCollapse-wrapper

Having trouble removing the display flex property from the MuiCollapse-wrapper, I did some research and found the rule name for the wrapper in this link https://material-ui.com/api/collapse/ I have been unsuccessful in overwriting the class name wrapper t ...

javascripthtmlcssreactjsmaterial-ui

The Owl carousel animation fails to work in Chrome browser

I am currently customizing an HTML5 template that utilizes the Owl Carousel 1.3.2. My goal is to incorporate a smooth fade animation when transitioning between slider images. The code snippet below works perfectly in the Mozilla Browser, however, I'm ...

javascriptjquerycsshtmlowl-carousel

Applying font size constraints in TailwindCSS

Is it possible to implement the clamp() CSS function with TailwindCSS in order to create linear scaling for the fontSize within a defined range? I am specifically curious about how this can be integrated with Next.js. ...

cssreactjsnext.jstailwind-cssclamp

What is causing FF and Chrome to not recognize these <form>'s?

My PHP logic is rendering the following forms with text inputs and a submit button. Everything works fine in IE, but in FF and Chrome, clicking the submit button reloads the page instead of going to the form action URL. I was surprised to find that the &l ...

phphtmlformsfirefoxcross-browser

"Interactive functionality: Toggling checkboxes with a DIV click

I am trying to set up a simple div container that displays contact information in a formatted list (<ul><li>). Clicking on the div currently takes you to the user's profile page, which is functioning correctly. However, I am facing an iss ...

jqueryhtmlcsscheckbox

Create a personalized message in PHP that corresponds to the specific row number

I created a table to show data sourced from a database. I decided to add a column that will display a message based on the row number being displayed. <form name="afisare1" method="POST" > <input type="submit" name="opt1" value="OK"/> ...

phphtmlmysql

Creating responsive images in a navbar with HTML and CSS

I need help with this code snippet: <div> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <div class="d-flex flex-row justify-content-center align-items-center"> <a cla ...

javascripthtmlcssbootstrap-4

What steps can I take to stop my html table from expanding beyond its intended size

There are instances where the length of a data piece in one of my table cells causes it to expand and distort the overall layout of the table. Is there a way to avoid this from happening? ...

htmlcss

Listening for JS events on a CSS class called "int-only" which only accepts

Having an issue: I'm encountering a problem with this PHP code: <?php for($i = 0; $i < sizeof($floating_ips_json["floating_ips"]); $i++){ ?> <tr class="details-control-<?php echo $i; ?> cursor-pointer"> <t ...

javascriptphpcss

What are the steps for creating a simple .htaccess file to add password protection to a website?

To enhance the security of my website, I implemented protection measures by creating a .htaccess file within the directory /var/www/html/. AuthType Basic AuthName "One does not simply" AuthUserFile /home/user/.htpasswd Require valid-user Additionally, I ...

html.htaccess

PHP Math Crunching

Hey everyone, I have created two separate pages: index.php test.php Here is index.php <!DOCTYPE HTML> <html> <head> <style> .error {color: #FF0000;} </style> </head> <body> <form method="get" action="test.p ...

phphtml

What is the most effective method for locating and capturing a specific element (such as an input box) in Python Selenium using either Xpath or CSS selector

I am currently using selenium to scrape a website, primarily relying on xpath or CSS selectors to extract elements. However, I have noticed that these selectors are dynamic, which contradicts what I have read online about CSS selectors being stable. As a b ...

pythoncssseleniumxpath

Include money symbols within input fields with padding and vertical alignment

I am looking to create an input field that includes either € or $ currency symbols. The challenge is ensuring perfect vertical centering inside the input, especially when using padding. Is there a foolproof method to achieve this? https://i.stack.imgur ...

htmlcss

HTML drop-down menu malfunctioning/missing from view

I am encountering an issue where the drop-down menu is visible, but when I try to make it disappear and then hover over it again to bring it back, it does not reappear. Here is the CSS code I am using: * { margin: 0; padding: 0; } body { back ...

htmlcss

The dark mode class in Next.js/React does not take effect until a local change is made

I've been diving into a helpful tutorial on implementing dark mode toggle in my project. The tutorial uses react-toggle and can be found here. Everything seems to be working fine except for one issue that arises on the initial page load. When the bro ...

htmlcssreactjsnext.js