I am currently in the process of redesigning a website, and I've encountered an issue with the header markup. While the design looks fine on most browsers, it behaves strangely in Microsoft Edge on Windows 10. The phone number in the header is inexplicably underlined as if it were a hyperlink. When clicked, Edge prompts me to open Zoom, a video conferencing application that I don't even have installed on my laptop where I'm viewing the website. All I want is for the phone number to be displayed prominently with a different text color!
If you'd like to see the HTML and CSS code for this issue, check out this JSFiddle. Here's a snippet 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> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="254f4a4b4056464d4c574a55574446514c46654248444c490b464a48">[email protected]</a>
</div>
</div>
<!-- row -->
</div>
<!-- header -->
</div>
</div>
</body>
</html>Does anyone know why Edge underlines the phone number but not the fax number, and why it tries to open Zoom? How can I prevent it from underlining the number and avoid launching the Zoom app?