Image Link Hovers still BLINKS/FLICKERS

[dynamic.flare]

So I just coded my first real website that I'm doing for a small store that just opened up. I work part-time for them and offered to build a simple site for them.

I'm having a problem with the image links with the hover style. In firefox, the link images blink/flicker the first time the mouse rolls over them, each one every single time. In Internet Explorer, the same thing happens, but even worse, is when the settings are set to reload images with each visit, the link images flicker every time the mouse rolls over it.

Here is the website:
http://www.originalgangsterburgers.com

You can view the css code by typing in
http://www.originalgangsterburgers.com/styles2.css

If anybody can help, I'd be very grateful. Thanks guys!

 

[elcape]

ok i was getting the same problem

what i do was rather from making the hover another separate image

I put both in the same image and later for the hover i change the position

all in css

 

[dynamic.flare]

that's exactly what I did, but it's still flickering.

 

[elcape]

i see the problem and i check the css and looks ok

dont know what wrong with it

sorry

 

[ddt]

Hi, I found 36 errors in your markup. Do you know about W3c Standards? If not, here is a link. http://validator.w3.org/ All you do is type in your URL into the check url box. Hit validate and it will tell you all your errors. DON'T worry about the amount of errors. Correct them form top to bottom first. Validate every time you fix something. Your numbers will reduce a lot for fixing one error. Cause one can cause many. Hope that makes sense to you and helps.

 

[elcape]

Hello,

A web site is a very powerful and affordable marketing and advertising tool and a great way to Grow your business into other areas of the state or country.

and what that have to do with the problem of css

 

[jonweb2009]

What i see is,

when u hover, the image moves 1px up and has a outerglow. The css works fine. But the actual problem is when you hover the image gets loaded and causing the flicker.

You may try javascript preloading the images first before using in navigation bar.

Or if you were building the site using dreamweaver, you can apply the behaviour preload images in the behaviour window in dreamweaver.

 

[elcape]

What i see is,

when u hover, the image moves 1px up and has a outerglow. The css works fine. But the actual problem is when you hover the image gets loaded and causing the flicker.

You may try javascript preloading the images first before using in navigation bar.

Or if you were building the site using dreamweaver, you can apply the behaviour preload images in the behaviour window in dreamweaver.

i dont think thats it because hes is chaging the background position on the hover so the image is already load up

 

[jonweb2009]

i dont think thats it because hes is chaging the background position on the hover so the image is already load up

I did not mean to say that the image is moving up, image looks like moving up.

CSS is fine,

the image has to be preloaded to avoid flickering

because, when you are hovering the css tells the browser to change the image, there after the image is loaded. But if the image is loaded first, it would immediately change the image from temp files.

most of the css navigation bar are built smaller images so that the flickering is not noticeable.

He can also use flash navigation bar, as it is only a normal navigation bar, no drop down menus or anyother kind

 

[elcape]

your right Jon i thought that he was using the same image and just change the background position

but he is using 2 different image so your solution is the best one