2 replies [Last post]
Vik
Offline
Regular
Last seen: 12 years 38 weeks ago
Joined: 2008-01-17
Posts: 12
Points: 0

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;}

/*]]>*/

test  PAGE 1

  • Page 2


  • 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?

    Vik
    Offline
    Regular
    Last seen: 12 years 38 weeks ago
    Joined: 2008-01-17
    Posts: 12
    Points: 0

    Fixed! It was just a missing

    Fixed! It was just a missing colon.

    This:

    #pmenu li.current_page hover{
    background: #096327 url("/images/menu-buttons.gif") no-repeat 0 0;
    background-position: 0 -47px;
    color:#fff; }

    ...needed to be this:

    #pmenu li.current_page:hover{
    background: #096327 url("/images/menu-buttons.gif") no-repeat 0 0;
    background-position: 0 -47px;
    color:#fff; }

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 31 weeks 19 hours ago
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    Thanks for letting us know

    Thanks for letting us know you fixed it Wink

    Verschwindende wrote:
    • CSS doesn't make pies