Incorrect Anchor Hover Background Image

Discussion in 'HTML' started by InteXX, Oct 14, 2009.

  1. InteXX

    InteXX Guest

    Hello

    I'm getting some unwanted behavior with my anchor hover background image.
    Here's the URL:

    http://fbn.intexx.com/

    It's the navigation bar across the top. For some reason the hover action
    loads the red image, not the blue one.

    Oddly, the problem only manifests at the very first hover, and then only for
    a split-second. Once the correct image loads into the browser cache, all is
    well for ever after.

    I've reviewed my markup and my CSS and all seems proper. But then again,
    this isn't my specialty.

    Can anyone spot what's going wrong?

    Thanks,
    Jeff
     
    InteXX, Oct 14, 2009
    #1
    1. Advertising

  2. InteXX

    rf Guest

    "InteXX" <> wrote in message
    news:4ad54408$...
    > Hello
    >
    > I'm getting some unwanted behavior with my anchor hover background image.
    > Here's the URL:
    >
    > http://fbn.intexx.com/
    >
    > It's the navigation bar across the top. For some reason the hover action
    > loads the red image, not the blue one.


    No it doesn't. The browser renders the red background you have specified in
    your #menu .active a rule, while it waits for Inactive.gif to be downloaded.

    > Oddly, the problem only manifests at the very first hover,


    Because after that the browser has the gif in its cache.

    Why are you using all those single colour images anyway. What's wrong with
    simply specifying a background colour? This would also make the entire page
    load faster.

    And why are you specifying font size in pixels?
     
    rf, Oct 14, 2009
    #2
    1. Advertising

  3. InteXX

    Neredbojias Guest

    On 13 Oct 2009, "InteXX" <> wrote:

    > Hello
    >
    > I'm getting some unwanted behavior with my anchor hover background
    > image. Here's the URL:
    >
    > http://fbn.intexx.com/
    >
    > It's the navigation bar across the top. For some reason the hover
    > action loads the red image, not the blue one.
    >
    > Oddly, the problem only manifests at the very first hover, and then
    > only for a split-second. Once the correct image loads into the
    > browser cache, all is well for ever after.
    >
    > I've reviewed my markup and my CSS and all seems proper. But then
    > again, this isn't my specialty.
    >
    > Can anyone spot what's going wrong?


    You are getting the background COLOR before the image loads. I see a
    red flash in various browsers, then blue.

    --
    Neredbojias
    http://www.neredbojias.org/
    http://www.neredbojias.net/
     
    Neredbojias, Oct 14, 2009
    #3
  4. InteXX

    InteXX Guest

    >> It's the navigation bar across the top. For some reason the hover action
    >> loads the red image, not the blue one.

    >
    > No it doesn't. The browser renders the red background you have specified
    > in your #menu .active a rule, while it waits for Inactive.gif to be
    > downloaded.


    Ah. Can we say "'Duh' moment?"

    Somehow my eye glossed right over that color rule. On my dev machine I've
    changed it now to:

    #menu .active a
    {
    background-image: url(../Images/Active.gif);
    background-repeat: repeat-x;
    }

    #menu .inactive a:hover
    {
    background-image: url(../Images/Inactive.gif);
    background-repeat: repeat-x;
    }

    I'm not all that handy with single-line style rules anyway--I tend to get
    bogged down in the translations.

    The template came that way so I just went with it. I feel better about it
    this way. I find it easier to read and interpret.

    Thanks!



    >> Oddly, the problem only manifests at the very first hover,

    >
    > Because after that the browser has the gif in its cache.


    Yep, makes perfect sense.



    > Why are you using all those single colour images anyway. What's wrong with
    > simply specifying a background colour? This would also make the entire
    > page load faster.


    If the images currently present aren't gradients yet, they will be by
    showtime.



    > And why are you specifying font size in pixels?


    The template came that way. That's something I've got to fix yet.

    So much to do, so little time...

    Thanks for your help.
     
    InteXX, Oct 14, 2009
    #4
    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. Shannon
    Replies:
    1
    Views:
    424
    brucie
    Jul 26, 2003
  2. DC
    Replies:
    2
    Views:
    7,163
  3. Replies:
    0
    Views:
    320
  4. Jason Heydasch
    Replies:
    1
    Views:
    480
  5. DOM Anchor Hover attribute

    , Aug 28, 2005, in forum: Javascript
    Replies:
    2
    Views:
    359
Loading...

Share This Page