[Solved] Rollover Image Appearing Where I Don't Call for It?

My menu buttons show a rollover image. I have a special class called "current_page" for the menu button that is for the current page. I don't want the rollover image to appear when class="current_page", but it does in Mac Firefox and Safari. (It works correctly in IE6).

The CSS provides the ability to have drop-down menus, with CSS only... no javascript. It's from:

http://www.cssplay.co.uk/menus/simple_vertical.html

I modified cssplay's CSS to:

- use background images instead of background colors for rollovers. (For this I used CSS from http://www.elated.com/articles/css-rollover-buttons/.)

- have a special background image to use on the current page. (This code I added is no doubt where the error is.)

The rollover CSS uses one image, and shows the top 24 pixels of it for the normal button state, the middle 24 pixels for the rollover state, and the bottom 24 pixels for the current page state.

background-position: 0 -24px; /* rollover */
background-position: 0 -47px; /* current page. I know, it seems like it should be -48 */

Why is the rollover image being displayed when class="current_page"?

Thanks in advance to all for any info.

Here's a link to the test page:

http://flavorzoom.com/menu_anomaly_page_1.html

And here's a copy of the test page:

PAGE 1

/* a {background-position: 0 -24px;
color:#fff; }
/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */
#pmenu li ul {display:none;}
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#pmenu li:hover > ul {display:block;
position:absolute;
top:-11px;
left:80px;
padding:10px 30px 30px 30px;
background-position: 0 -24px;
width:120px;}
/* Position the first sub level beneath the top level liinks */
#pmenu > li:hover > ul {left:-30px;
background-position: 0 -24px;
top:16px;}

/* get rid of the table */
#pmenu table {position:absolute;
border-collapse:collapse;
top:0;
left:0;
z-index:100;
font-size:1em;}

/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
* html #pmenu li a:hover {position:relative;
background-position: 0 -24px;
color:#fff;}

/* For accessibility of the top level menu when tabbing */
#pmenu li a:active, #pmenu li a:focus {
background-position: 0 -48px;
color:#fff;}

/* Set up the pointers for the sub level indication */
#pmenu li.fly {background:#096327 url(http://www.flavorzoom.com/images/fly.gif) no-repeat right center;}
#pmenu li.drop {background:#096327 url(http://www.flavorzoom.com/images/drop.gif) no-repeat right center;}

/*]]>*/

  PAGE 1

The blue button is class="current_page". I don't want the rollover image to appear over it, but it does in Mac Firefox and Safari. How do I correct this?