0

I have a relatively simple bit of markup on the header of a website I'm redesigning and it seems to display fine on browers I've tried but a rather odd thing happens in Edge (on Windows 10): the phone number in the header shows up underlined, as if it is a link, and when I click on it, it asks if I want to open Zoom. I know Zoom is a videoconferencing app but I don't even have it on my laptop where I am displaying this website so I'm not sure why it wants to offer to take me into Zoom. I just want to display a phone number and make it stand out a bit by colouring it differently than the surrounding text!

Here is a JSFiddle that shows my HTML and CSS (inline). And here's the code from the JSFiddle: 

<!doctype html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>My Title</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link href="css/main.css" rel="stylesheet" type="text/css" media="screen" />
  <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
    #phoneno {
      color: aqua
    }
  </style>
</head>

<body>
  <div class="container-fluid">
    <div id="page-content">
      <div id="header">
        <div class="row">
          <div class="col-sm" id="Jones Chiropractic">JONES CHIROPRACTIC</div>
          <div class="col-sm text-right" id="Doctor">Dr. Fred Jones</div>
          <div class="col-sm ml-auto text-right" id="JonesContact">
            123 Main St. W.<br> St. Louis, MO<br> Phone <span id="phoneno">(555) 555-5555</span><br> Fax (555) 555-5556 <br> joneschiropractic@gmail.com
          </div>
        </div>
        <!-- row -->
      </div>
      <!-- header -->
    </div>
  </div>
</body>

</html>

Why does Edge underline the (first) phone number (but not the fax number) and why does it want to open Zoom? How do I make it just display it without the underline and persuade the browser not try to launch Zoom?

Akshay Mulgavkar
  • 1,727
  • 9
  • 22
Henry
  • 1,395
  • 1
  • 12
  • 31
  • If you change the "Fax" text into "Phone", you will also get an underlined phone number. I guess Edge somehow scans for that. See [this forked fiddle](https://jsfiddle.net/utry436c/). – yqlim Dec 04 '19 at 02:57
  • I am flagging this question its already been answered before at stackovertflow https://stackoverflow.com/questions/31978346/remove-microsoft-edges-phone-number-styling –  Dec 04 '19 at 03:01

1 Answers1

2

You should be able to override this if you put the following in the head section for your page:

<meta name="format-detection" content="telephone=no">

This page has more information on this.

tkingston
  • 114
  • 6