Incorrect Anchor Hover Background Image

I

InteXX

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
 
R

rf

InteXX said:
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?
 
N

Neredbojias

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

InteXX

It's the navigation bar across the top. For some reason the hover action
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!


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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top