hover image flicks everytime hover for the first time

[Lisa23]

Hi i am creating this menu the strange thing that happens is everytime you refresh the page and hover for the button it flicks but that only happens when u refresh the page and hover the button for the first time i am using a image to hover help please?

 

this my site

http://eurico.co.uk/staging/

 

this is my css code

/* start centeredmenu*/
#centeredmenu { margin-top:10px; background:#fff; overflow:hidden; position:relative;}
#centeredmenu ul { float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; }
#centeredmenu ul li { display:block; float:left; list-style:none; padding:0; position:relative; right:50%; font-size:12px; }
#centeredmenu ul li a {
font-family:'FuturaMdBTMedium'; 
display:block; 
margin:0 0 0 2px; 
padding:7px 36px;
background: url("../images/menu_li_bg.png") repeat-x scroll left top transparent;
color:#FFF; 
text-decoration:none;
}

#centeredmenu ul li a:hover {
    background: url("../images/menu_hover_li_bg.png") repeat-x scroll left top transparent;
}

 

[freelance84]

 

You may want to read up on sprites. The reason the image is 'flicking' and only on the first time is because the browser doesn't actually have the image to replace with and the flick of white is actually the time it takes for the image to be downloaded..

 

With a sprite, the idea is on hover css simply moves the back ground picture because the sprite actually holds lots of images (inspect element with firebug in ff on a facebook icon for exmaple), thus there is no flick as there is no download time, as the images have already been downloaded.

 

OR

 

Your you could use css gradients on your buttons.... http://webdesignerwall.com/tutorials/cross-browser-css-gradient