Remove Orange Border on Active Menu in ASP.NET

Question

Recently I have been learning ASP.NET. I have ran into a slight difficulty which I cannot fix nor find a solution to after hours of trial and error/searching. Now you know I'm not wasting your time, here's the information!

I have created a bog-standard Menu in ASP.NET. It simply has four normal links from a normal Web.Sitemap file. I have styled it by referring to its ID via an external style sheet. Everything has been styled normally, EXCEPT an ugly orange border, which appears when a link is clicked on. I believe it is therefore :active when it has the orange border. So how do I remove this orange border?

Here is the relevant code:

In the MasterPage

<div id="Menu">
            <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" 
                Orientation="Horizontal">
            </asp:Menu>
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" 
                ShowStartingNode="False" />
        </div>

From the external stylesheet:

#Menu
{
    height:20px;
    width: 780px;
    font-size: 20px;
}

#Menu ul li
{
    text-align: center;
    width: 195px;
    background-color: #FFFFFF;
    display: block;
}

I have tried several different solutions which I would love to list to save your time, but I have probably forgotten the majority of them. Anyway... I could be making some stupid mistake which you will find immediately!

If you need more information then I will share whatever code, this is just a project I'm putting together for a few friends.

Many thanks for your time, JDWebs.

Yes the problem was just in chrome, but Ryan's solution fixed it. — , Feb 26 '12 at 09:09

score 0 · Answer 1 · edited May 23 '17 at 12:03

0

This is probably a duplicate of How to remove border (outline) around text/input boxes? (Chrome)

BTW: Use classes instead of IDs to style your menu. Using IDs is not a good idea if you use it together with ASP.NET because ASP.NET generates it's own ID for the tags with runat="server".

edited May 23 '17 at 12:03

Community

1
1

answered Feb 25 '12 at 22:37

CodeZombie

5,367
3
30
37

Thank you for that tip - I didn't think that it made a difference! – Feb 25 '12 at 23:56
+ P.S. I viewed that question before but it was slightly different to the above apart from the outline which I didn't pick up on. Anyway, that's an interesting read. – Feb 25 '12 at 23:59

score 0 · Accepted Answer · answered Feb 25 '12 at 23:16

0

What if you try the following?

#Menu ul li a, 
#Menu ul li a:active {outline:none;}

answered Feb 25 '12 at 23:16

Ryan

2,433
5
31
41

Thank you so much! Like I said I was just beginning so I was not aware of the outline property; I thought it was border. I also forget the a! Once again thanks for your quick and correct response! Is there any other way I can repay you (e.g. ratings etc...)? – Feb 25 '12 at 23:54
Haha, there's no need to repay me beyond a simple thank you. I'm just glad that I was able to help. – Ryan Feb 25 '12 at 23:56

Remove Orange Border on Active Menu in ASP.NET

2 Answers2