Edge - Highlight Current Link in Navbar

[Andy]

Hi all,

I have a navigation bar which highlights the current page a user is on.

Here is the HTML/PHP:
I have given each page a name and then the navigation bar further down in the body.

[php]<?php $page="page1";?>[/php]

[php]

Page 1

• ">Page1
• ">Page2
• ">Page3
• ">Page4

[/php]

Here is the CSS:

[code]nav{
background-color: #444;
font-size: 1.143em;
height: 40px;
line-height: 30px;
margin: 0 auto 30px auto;
text-align: center;
border-radius: 5px;}

nav ul{
list-style: none;
margin: 0 auto;}

nav ul li{
float: left;
display: inline;}

nav a:link, nav a:visited{
color: #ffa500;
display: inline-block;
padding: 5px 23px;
height: 30px;
text-decoration: none;}

nav a:hover, nav a:active, li.current a:link, li.current a:visited, li.current a:active{
background-color:#99cc00;
color:yellow;}

nav li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;}[/code]

Chrome and Firefox display the menu correctly, highlighting the current link (green/yellow).

I don’t know why Edge is not picking up on the background-color. Instead it displays (white/yellow).

Can anyone suggest a reason or see what I am doing wrong?

Thanks, Andy

[Andy]

Ah, figured it out.

I broke li.current a:link and li.current a:visited into two separate css statements.

It now works across all three browsers: Chrome, Firefox & Edge.

If anyone knows why you have to separate them, please let me know, Andy

[Topcoder]

[member=42459]Andy[/member],

That’s interesting, thanks for sharing. I haven’t played much with Edge yet. I have it installed, but a lot of sites I visit have issues with it.