Question

I’ve recently replaced the images of my buttons (where the jQuery code worked just fine) with CSS buttons, and now they’re disappearing as soon as I click on them (which activates the bounce function).

Demo: http://jsfiddle.net/KGAmZ

Any help would be much appreciated!

Answer 1

The margin-top rules are throwing things off. Remove margin-top from #mainMenu and replace it with top: -45px. Then remove the top rule from .mainMenuButton, and you should be set.

#mainMenu
{
    position: relative;
    width: 1024px;
    height: 80px;
    z-index: inherit;
    top: -45px;
    zoom: 1; /* For IE6 */
}
.mainMenuButton
{
    float: left;
    text-align: center;
    width: 128px;
    height: 80px;
    background-color: #ddd;
    padding: 0px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;
    behavior: url(js/border-radius.htc);
}

Edit: I’m new to the fiddle. Example there as well: http://jsfiddle.net/KGAmZ/8/