Custom Scrollbar and Chrome

So I wanted to use a custom scroll bar to make the website I am creating more attractive. I found out about a script called fleXcroll. Basically on the fleXcroll website when I click anywhere inside my scrollable content, there is a large yellow border around the entire wrapper. I have no idea why this is happening because on the fleXcroll website when I click inside scrollable content, this border doesnt appear and same thing goes for firefox. When I click in firefox or IE the content appears as it should. Anyone have any ideas as to why this is happening?

Here is a link t开发者_如何学Co the site and please provide kind/constructive comments. This is my first time coding a website.

go to the flavors page

You can fix that by adding outline: none to the parent div. So the styles for #menu will be:

#mainContent #menu {
    clear: both;
    height: 500px;
    overflow: auto;
    padding: 15px;
    width: 620px;
    outline: none;
}

BTW that is a very delicious site.

I have no idea why it's happening, as I've never used your flexcroll, however, the fix is easy:

.flexcroll{
  outline: none;
}

Add this to any stylesheet that is shared cross-site and you should be good.