Rollover Image Appearing Where I Don't Want It?

Discussion in 'HTML' started by Vik Rubenfeld, Jan 27, 2008.

  1. 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.
    Vik Rubenfeld, Jan 27, 2008
    #1
    1. Advertising

  2. Vik Rubenfeld

    Chaddy2222 Guest

    On Jan 27, 1:28 pm, Vik Rubenfeld <> wrote:
    > 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.
    --
    Regards Chad. http://freewebdesignonline.org
    Chaddy2222, Jan 27, 2008
    #2
    1. Advertising

  3. Vik Rubenfeld

    Guest

    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."
    , Jan 27, 2008
    #3
  4. Chaddy2222 <> wrote:

    > 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?
    Vik Rubenfeld, Jan 27, 2008
    #4
  5. Vik Rubenfeld

    Chaddy2222 Guest

    On Jan 27, 6:42 pm, Vik Rubenfeld <> wrote:
    >  Chaddy2222 <> wrote:
    > > For a start have a read of:
    > >http://freewebdesignonline.org/wdto/articles/text/is-yourcontent-impo...
    > > 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?


    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.
    --
    Regards Chad. http://freewebdesignonline.org
    Chaddy2222, Jan 27, 2008
    #5
  6. Vik Rubenfeld

    rf Guest

    "Vik Rubenfeld" <> wrote in message
    news:-sjc.supernews.net...

    > 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*.

    --
    Richard.
    rf, Jan 27, 2008
    #6
  7. "rf" <> wrote:

    > 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.
    Vik Rubenfeld, Jan 27, 2008
    #7
  8. Vik Rubenfeld

    rf Guest

    "Vik Rubenfeld" <> wrote in message
    news:-sjc.supernews.net...
    > "rf" <> wrote:
    >
    >> 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*.


    [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
    :

    --
    Richard.
    rf, Jan 27, 2008
    #8
  9. "rf" <> wrote:

    > 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.
    Vik Rubenfeld, Jan 28, 2008
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. DC Gringo
    Replies:
    0
    Views:
    358
    DC Gringo
    Oct 31, 2004
  2. Replies:
    2
    Views:
    273
    7stud
    Apr 14, 2008
  3. Rock
    Replies:
    10
    Views:
    213
    Ehsan
    Apr 23, 2006
  4. Mark Szlazak
    Replies:
    3
    Views:
    174
    Fletch
    Apr 25, 2006
  5. Dan
    Replies:
    3
    Views:
    127
Loading...

Share This Page