Stopping smart highlighting on mobile email clients like Outlook

After sending a test email to Outlook and opening it in the Outlook iOS app, I noticed that the default style of the text for dates/times appears with its own color.

https://i.sstatic.net/iydYd.png

(The white/gray part is only to conceal the text, revealing the green-ish underline text (which represents a date and time).

Since apps don't allow debugging, it's challenging to determine which class might have been applied to the displayed HTML.

Is there a way to prevent this behavior and have the text display the color defined in CSS?

Note: This HTML is generated using MJML. Here is the transpiled HTML for that paragraph:

<tr>
    <td align="center" style="font-size:0px; word-break:break-word">
        <div style="font-family:helvetica; font-size:10px;">
            TEXT WITH DATE
        </div>
    </td>
</tr>

text-decoration: none can remove the underline style, but changing the color (color: white) doesn't work - even with or without !important.

cssoutlookhtml-emailmjml

Answer №1

How to prevent date and time auto-linking on an iPhone:

To avoid automatic linking, you can:

  • Insert a &#8203; (Zero Width Space character) between the different parts of the date/time text
  • Use nbsp; (Non-breaking space) for blank spaces within the text

For example:

  • Date with smart linking/highlighting: November, 1st 10:15
  • Date without automatic linking/highlighting: &#8203;November&#8203;,&nbsp;&#8203;1st&nbsp;10&#8203;:&#8203;15

Answer №2

Many mobile devices automatically detect and link dates and addresses, making it convenient for users to quickly add them to their calendar or mapping apps.

To ensure a consistent look, consider wrapping the text with inline styling so that when these devices create links, the text maintains a preset style. Smartphones will automatically generate the href portion of the link.

For example:

<a style="color:#000000;text-decoration:none;">
 January 25, 2022
</a>

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

The accuracy of Google Maps is compromised when the width is expanded

Here's a piece of code I use to adjust the size of the Google Map container: var myMap = document.getElementById('googleMap'); myMap.classList.toggle('fullscreen'); And here is the corresponding CSS: .fullscreen { width: 100% !i ...

javascripthtmlcssgoogle-maps

The CSS table is not displaying the border on the last td when using the nthchild() function

My goal is to display the table td's with alternating borders - one with a border and one without on the bottom. Everything seems to be working fine except for the last td of the table, where the border-bottom does not appear. Additionally, the issue ...

htmlcssinternet-explorer-8css-tables

The 600 pixel wide page is not completely filling the 640 pixel width screen on a mobile device

Currently, I am conducting a test on a webpage using an iPhone 5s with a screen resolution of 1136 x 640 pixels. The meta tag is set as follows: <meta name="viewport" content="user-scalable=yes, initial-scale=1, width=device-width, shrink-to-fit=no"&g ...

htmlioscssmedia-queriesresponsive

Moving the element from the right side

Is there a way to change the direction of this element's transition from left to right, so that it transitions from right to left smoothly without any gaps between the element and the edge of the page? @keyframes slideInFromRight { 0% { trans ...

css

Finding a particular CSS3 Keyframe using JavaScript

Is there a way to detect when an animation reaches a specific keyframe, like 50% or 75%? I attempted the following: element.addEventListener("animationend", AnimationListener, false); However, this only supports animationstart, animationiteration, and a ...

javascriptcsscss-animations

Prevent the end of the scroll from causing a new scroll to start?

In the code snippet provided, there are two divs. When scrolling down past the end of the blue div, the overall body/div also scrolls down. Is there a way to prevent this additional scrolling effect once reaching the scroll boundary of the blue div? For e ...

javascripthtmlcss

Having Trouble with the Dropdown Submenu in Bootstrap

Could someone assist me in getting this dropdown menu to function properly? I am trying to make it so that when the "Program" menu is clicked, a dropdown submenu will appear. I have inserted some code for it, but unfortunately it's not working. Just t ...

htmltwitter-bootstrapcssbootstrap-4

The header and footer are not extending across the entire width of the page

While testing on a responsive screen, I noticed that the header and footer both decrease in width instead of maintaining 100% width as intended. The issue only occurs when I reduce the width of the screen. body{ margin: 0; padding: 0; box-si ...

htmlcssheaderfooter

Access dynamic content from Tinymce 4.x without any manual effort

Is there a way to extract the HTML content from a tinyMCE editor and display it on a page without using the tinyMCE editor itself? I know about the getcontent() function in tinyMCE, but is there another function, parameter, or plugin that can be used to ...

cssclasstinymceextract

The pictures are not appearing on my local website

After completing the following steps: Node.js was successfully installed In the command prompt, I entered: npm install http-server -g Navigated to my website files located in cd user/me/local In Google Chrome, I typed: localhost:8080 Upon opening my HTML ...

htmlcsslocalhost

Inconsistent expansion panel widths observed in Chrome when using React material-ui

I've encountered an issue in Chrome where the width adjusts to fit its content instead of taking up the full width of the container. However, this problem does not occur on Firefox. https://i.stack.imgur.com/HyWGU.png When I click on the expand icon ...

cssreactjsmaterial-ui

Chrome compatibility issue with margin collapsing

I'm currently working on a website and encountering a CSS issue. It appears fine in Firefox, but has some odd layout problems in Chrome. I would appreciate any assistance on how to resolve this issue. On the main page, if you scroll down, you'll ...

htmlcssmargin

Can Chrome support color management for css colors?

In my current project, we are dealing with designers who work in Adobe RGB and are accustomed to viewing the vibrant colors from that spectrum in Illustrator. However, we are developing an application that will enable them to work in a web browser using a ...

csscolorsthree.jscolor-management

Unable to apply the CSS `::first-letter` pseudo-element using the `:not

One of the tasks at hand is to increase the size of the initial letter in each P element that does not have the class ejemplo or the id lectura. The following code snippet accomplishes this successfully: p::first-letter { font-size: 300%; } However, t ...

csscss-selectors

The font of the <select> element is currently set to MS Shell Dlg by default

The tools I am currently utilizing are as follows: body { font-family: Verdana, Arial, Helvetica, sans-serif; background: url(/Content/images/bg.png) no-repeat center top; min-height: 100%; } Although I do not explicitly style my select boxes ...

htmlcss

How can I display two different styles on a single page in ASP.NET MVC without any conflicts between CSS classes?

Currently, I am developing a web-based application that is capable of generating documents containing specific data. A new functionality has been introduced in the document generator, allowing users to input an Atlassian Confluence link into a designated t ...

c#htmlcssasp.net

Appearance with grey background color instead of transparency

After attempting to remove the background-color attribute, I noticed that the background remains a shade of grey instead of becoming transparent. Here is the code snippet: CSS: #contact-form button[type="submit"] { position: absolute; width: 100 ...

htmlcss

The art of bringing a pseudo class to life through animation

Seeking assistance with achieving a unique effect on click event. I have set up a slanted or razor-blade style div using a parent div element and a pseudo-element :after (as shown below). My goal is to change the skew angle when the user clicks on the pare ...

javascriptjqueryhtmlcss

Preventing touch scrolling within a container with an overflow set to scroll/auto feature and enabling dragging within the container

Help needed: Issue with scrolling inner div within draggable outer div. I am facing an issue where I am unable to scroll the inner box properly on my iPad. The problem arises when I try to scroll the inner box, and the outer box starts moving instead. I ...

javascriptcssjquery-uidraggabletouch-event

What is the best way to remove headers and footers programmatically in print pages on Safari using JavaScript?

Struggling with eliminating the header and footer on print pages in Safari using JavaScript? While disabling the header and footer manually can be done through print settings in most browsers, my aim is to automate this process with code to ensure that use ...

javascriptcsssafari