Some Images flicker in IE8

Question

I have Isolated the code to these div image swaps. The second image flickers, regardless of position. I can't figure it out? The images are basically the same it is for a menu image hover states. Is there something wrong with my code for IE8?

<div class="home">&nbsp;</div>
<div class="image2">&nbsp;</div>

Here is the CSS:

.home{
    background-image: url('home.png');
    background-repeat:no-repeat;
}
.home:hover {
    background-image: url('home_hover.png');
    background-repeat:no-repeat;
}
.image2{
    background-image: url('image2.png');
    background-repeat:no-repeat;
}
.image2:hover {
    background-image: url('image2_hover.png');
    background-repeat:no-repeat;
}

The first image does not flicker. The CSS is the same, I can reposition the DIV and get the same results. Why does the image flicker? It doesn't seem to matter if I put a height or width attribute to it either.

Answer 1

The flickering is due to the fact that you are using a different image for your hover effect. When your page initially loads, home.png and image2.png will be loaded and not your hover images. Your hover images of home_hover.png and image2_hover.png will only be loaded when you first hover the elements they are applied to. Which means, the moment you hover a request is made to the server for that background image. This takes a few short moments but is long enough to create the flicker.

I would suggest combining the default states and the hover states of each image into a single image. If you have an image that is 100px by 50px then your combined image would be 100px by 100px. Place the default state at the top of the image file and the hover at the bottom.

Your next step would then be to set dimensions on the element that has the rollover. The CSS would something like this:

.home {
     background-image: url(home.png);
     background-position: 0 0;
     display: block;
     width: 100px;
     height: 50p;x
}
.home:hover {
     background-position: 0 -50px;
}

What's happening here is that you are creating a window 100px by 50px in size. That dimension matches the top half of your image file which is the default state. The extra 50px of your image remain hidden.

Using background position allows us to shift the image relative to the element. We use -50px to shift the image up which reveals the lower half of the image which is your hover state.

NOTE: You also do not need to use   for your DIVs.