Rollover Image Appearing Where I Don't Want It?

[Vik Rubenfeld]

I've got a page that (for once) is doing what I expect in IE6, but not
in Mac Firefox or Mac Safari.

I have the menu buttons set up so that the current page has a blue
button, and the buttons for other pages are green. Hovering over a
green button reveals a light-green rollover button.

The anomaly is that the rollover button is also appearing over the blue
button for the current page in Mac Firefox or Mac Safari.

I have set up a test page with just the minimal CSS and HTML to
demonstrate the anomaly. Here is the link to the test page:

http://www.flavorzoom.com/menu_anomaly_page_1.html

The menu CSS comes from
http://www.cssplay.co.uk/menus/simple_vertical.html. The rollover CSS
comes from http://www.elated.com/articles/css-rollover-buttons/.

I've modified the menu CSS to show a special color for the current page,
and have done it incorrectly somehow. I'm a CSS newbie compared to most
of the folks here.

How can I set up the CSS correctly, so that the blue button doesn't show
the rollover image in Mac Firefox or Safari?

Thanks very much in advance to all for any info.

 

[Chaddy2222]

I've got a page that (for once) is doing what I expect in IE6, but not
in Mac Firefox or Mac Safari.

I have the menu buttons set up so that the current page has a blue
button, and the buttons for other pages are green.  Hovering over a
green button reveals a light-green rollover button.

The anomaly is that the rollover button is also appearing over the blue
button for the current page in Mac Firefox or Mac Safari.

I have set up a test page with just the minimal CSS and HTML to
demonstrate the anomaly. Here is the link to the test page:

http://www.flavorzoom.com/menu_anomaly_page_1.html

The menu CSS comes fromhttp://www.cssplay.co.uk/menus/simple_vertical.html.. The rollover CSS
comes fromhttp://www.elated.com/articles/css-rollover-buttons/.

I've modified the menu CSS to show a special color for the current page,
and have done it incorrectly somehow. I'm a CSS newbie compared to most
of the folks here.

How can I set up the CSS correctly, so that the blue button doesn't show
the rollover image in Mac Firefox or Safari?

Thanks very much in advance to all for any info.

For a start have a read of:
http://freewebdesignonline.org/wdto/articles/text/is-yourcontent-importent.php
Then remove the hver part of the list items on the current page link.

 

[SigelsTankMage]

maybe it would help to read key bits in the article.

"If you want to create many rollover buttons in the page - for
example, as part of a menu - copy and paste the HTML and CSS, giving
each button a unique id in both the HTML and the CSS and, of course,
changing the background image for each button in the CSS."

 

[Vik Rubenfeld]

For a start have a read of:
http://freewebdesignonline.org/wdto/articles/text/is-yourcontent-importent.php
Then remove the hver part of the list items on the current page link.

I have removed the following from the test page:

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

....but the anomaly is still there. Is there another part of the CSS
which should be removed?

 

[Chaddy2222]

I have removed the following from the test page:

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

...but the anomaly is still there.  Is there another part of the CSS
which should be removed?

Personally I would re-write the entire stylesheet.
But as you do / may not have the time to do that just play around with
the link styles till you gert the thing working.

 

[rf]

I've got a page that (for once) is doing what I expect in IE6, but not

As usual IE is getting it wrong.

in Mac Firefox or Mac Safari.

I have the menu buttons set up so that the current page has a blue
button, and the buttons for other pages are green. Hovering over a
green button reveals a light-green rollover button.

The anomaly is that the rollover button is also appearing over the blue
button for the current page in Mac Firefox or Mac Safari.

Because you have told it to. I think.

li:hover works in modern browsers. It does not work in IE.

That is one nasty peice of CSS. You should delete it and then gradually add
rules and property/values back *as you understand what they are there for*.

 

[Vik Rubenfeld]

Because you have told it to. I think.

li:hover works in modern browsers. It does not work in IE.

That is one nasty peice of CSS. You should delete it and then gradually add
rules and property/values back *as you understand what they are there for*.

Most of the CSS is not by me. The vast majority of it, as I noted, is by
other people who I believe are well thought of, judging from the high
google ranking of their pages. 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 is
probably the nasty CSS you noticed, and I'm sure I've made some mistake.

The thing is, the anomaly isn't present in IE - it's only present in the
modern browsers.

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.

 

[rf]

[snippage excuses for CSS other than to say:]

A high page ranking does not imply high quality code. Look at google.com.

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

<sigh> Did you not read my post. I answered this. Here, I'll repeat it:

Because you have told it to. I think.
li:hover works in modern browsers. It does not work in IE.

You have a rule
#pmenu li.hover {...}

That rule is causing the background to move on hover for *every* list item.
All of them. Even the 'current' one.

The reason this does not happen with IE6 is that IE6, being a broken
browser, does not support hover on anything other than links.

Now, the reason I include the phrase "I think" is that I never actually
tested this in IE6. I just used firebug to remove the above rule and noticed
that things worked with firefox.

BTW '#pmenu li.current_page hover' is never going to work. You are missing a
:

 

[Vik Rubenfeld]

BTW '#pmenu li.current_page hover' is never going to work. You are missing a
:

Thank you very much. Putting the colon back in fixed it.