Question

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 to the site and please provide kind/constructive comments. This is my first time coding a website.

go to the flavors page

Answer 1

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.