1. What are the dimensions of your "blood-bowl.png" image?

2. I'm curious about your use of repeat-y for the background image when you are positioning it at an offset (0,40)

3. It looks to me like when the user hovers over the link, the background image is effectively removed from the link, as you are positioning it out of sight - letting the background image of the #bloodbowl show through (but then that may not be visible either). Is that right?

4. Should the line #navagation a:hover not be #bloodbowl a:hover ...?

5. Should the line <div id="home"> not be <div id="bloodbowl"> ...?

Sorry if these Qs appear a bit random, as I don't know the bigger picture - and I'm learning myself.

Thanks.

1) The dimensions of the image is:
height: 80px
width: 198px

2) The repeat was just in the code we copied it from it isnt really required.

3) The image is effectivelly the same thing on top of each other with minor change so when you scroll over it moves down 40px revealing the top half the image.

4) Because bloodbowl isnt the only one there is multiple so this way it automatically sets it for all i have not just bloodbowl.

5) Sorry yes it should i copied the wrong section of code.

I hope this can make it clearer for you as i am greatful for any help given.

2) If repeat-y is not required, I would have thought it was best setting background-position:no-repeat - in case it did ever spill out of your container.

3) I may be missing something, but from your code it looks as if just the top 40px of the blood-bowl.png image (total height 80px) is ever used (in the anchor at least). Since you are either seeing the top 40px or nothing at all (ie. the background of the div behind).

To view the bottom half of the 'blood-bowl.png' image in your anchor when you hover over it, use a negative vertical position:

#navagation a:hover { 
background-position: 0px -40px; /* -ve vertical position */ 
}

Although I assume your rollover effect is already doing what you want it to do, so the above may not be relevant.

4) and 5) If bloodbowl isn't the only one on the page, then you should be using a class rather than an 'id' (.bloodbowl rather than #bloodbowl in your CSS and class="bloodbowl" rather than id="bloodbowl" in your HTML). IDs should be used for individual elements on a page that appear just once.

Q. Is the div container intended to be the same size as the <a> it contains? Does the div container only wrap around the anchor and no other elements?

If so, then specifying a background-image, position and repeat for the bloodbowl div is unnecessary, since it can all be done on the anchor alone - and this avoids having the image loaded twice. It is possible that the div could be avoided altogether. This could *perhaps* help to avoid the flicker you are experiencing.

Also, I would set background-repeat: no-repeat; on your anchor tag, as in...

#bloodbowl a { /* Should really be a class(.) though I think */ 
... 
background-repeat: no-repeat; 
background-position: 0 0; /* Just to be clear */ 
... 
}

Other than tidying the code and avoiding repetition I cannot see an obvious reason for your flicker. Is your machine the same spec as other machines you have tested it on? I have a PII-300 test machine that does exhibit noticeable delays on some animated gifs and rollovers?!

Is your .png image complex - using Alpha Transparency and all the rest?

2) Iam not warried about it spilling out of the container as at under the container is an image on top so it couldnt be seen but i will look into changing it anywat.

3) I am not 100% how it works but other than the flicker it does work so this should be fine.

4) and 5) The reason for it being a div is that there is many different buttons some were different sizes so i decided to make a div for each.

And to answer your other questions the container is larger due to the other buttons and images in the container.
All computers i have checked it on are the same only i have better graghics card. My images arent complex at all.