CSS borders appearing and disappearing in MS Edge - html

Question

My website code has an annoying problem. Whenever I view the page with Microsoft Edge and hover over a link, one of the borders turns and stays white until you hover over another link, which switches another border.
body {
font-family: Sans-Serif;
background-color: blue;
}
.Overhead {
background-color: red;
background-image: url('cats.jpg');
}
.Title {
margin: 5px;
}
.Active {
background-color: rgba(255, 255, 255, 1);
}
.Menu {
overflow: hidden;
}
.Menu a {
transition: .5s ease;
display: block;
text-align: center;
text-decoration: none;
color: grey;
padding: 5px;
float: left;
width-max: 50px;
background-color: rgba(255, 255, 255, 0.5);
}
.Menu a:visited {
color: grey;
}
.Menu a:hover {
background-color: rgba(255, 255, 255, 1);
}
<div class="Overhead">
<h1 class="Title">Title</h1>
<div class="Menu">
<a class="Active" style="background-color: rgba(255,255,255,1);"><b>Home</b></a>
<a><b>About</b></a>
<a><b>Service</b></a>
<a><b>Contact</b></a>
</div>
</div>
I'm looking for a way to change the CSS so the borders stop appearing. I tried to completely get rid of the border, but that didn't work. Is there any way to fix this?

Answer 1

if you don't want a border, just do this
border: 0px solid black;
this will make it so there isn't a border, if you ever see one.
In your code up there, there isn't a border, so use this if you see your border.
Note: it could just be border: 0px;, but I haven't tried it.
$('.a').mouseenter(function() {
$(this).css("border", "0px")
$(this).css("background-color", "rgba(255, 255, 255, 1)");
$(this).css("transition", "0.3s");
});
$('.a').mouseleave(function() {
$(this).css("border", "0px")
$(this).css("background-color", "rgba(255, 255, 255, 0.5)");
$(this).css("transition", "0.3s");
});
body {
font-family: Sans-Serif;
background-color: blue;
}
.Overhead {
background-color: red;
background-image: url('cats.jpg');
}
.Title {
margin: 5px;
}
.Active {
background-color: rgba(255, 255, 255, 1);
}
.Menu {
overflow: hidden;
}
.Menu a {
transition: .5s ease;
display: block;
text-align: center;
text-decoration: none;
color: grey;
padding: 5px;
float: left;
width-max: 50px;
background-color: rgba(255, 255, 255, 0.5);
}
.Menu a:visited {
color: grey;
}
.head {
border: 0px solid black;
}
#service {
margin-left: 0.4px;
}
#contact {
margin-left: 0.35px;
}
}
#container {
background-color: rgba(255, 255, 255, 0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Overhead">
<h1 class="Title">Title</h1>
<div class="Menu">
<div id="container">
<a class="Active" style="background-color: rgba(255,255,255,1);"><b>Home</b></a>
<a id="about" class="a"><b class="head">About</b></a>
<a id="service" class="a"><b class="head">Service</b></a>
<a id="contact" class="a"><b class="head">Contact</b></a>
</div>
</div>
</div>

Answer 2

I could replicate your problem. it is not a border, but actually two semi-transparent white backgrounds overlap in Ms Edge and creates a bolder white line. you can add margins between items in the menu, or a better solution could be to apply background-color: rgba(255, 255, 255, 0.5); to .Menu instead (set transparent background for menu items and keep the transition to white background on hover).

Answer 3

If you're using Microsoft Edge, this is because it's an Edge browser glitch. You will need to edit this so that it renders in MS Edge or just bear with it right now. Try placing space between the navbar items