div:hover positions swap image differently in different browsers

I've used th开发者_运维知识库e div:hover CSS rule to achieve the desired affect - an image "swap" when the mouse hovers over a navigation image: www.scottmccarthydesign.com/dev.index.html

My setup here, however, is not actually a "swap." The main navigation image is a flattened jpeg of the entire desk (for faster loading), and there are empty divs over each item on the desk to map the image with links. When these empty divs are moused over, the div:hover rule fills the div with a .png that is meant to be placed precisely over the main desk image to give the effect of an image swap.

It works nicely in Firefox, but I do not understand why Safari is positioning the :hover image over the desk differently than Firefox is - each :hover image is about 1 pixel off, making it look like the seperate images on the desk are actually shifting a bit when moused over. Any suggestions??

I've had trouble using the :hover pseudo-class on elements other than <a></a>. You could use (jquery/javascript) to alter the class of the said <div> using onmouseover and onmouseout events.

With onmouseover, add a class that defines a certain background image. With onmouseout remove that class.

Even easier, use jquery .hover()

reposition your links after adding this to your css:

a div {
    line-height: 0;
}

I've come across this issue before and found that it had to do with the size of the image. When the image is an odd-number pixel size on one of its dimensions, the calculations done by Firefox and Chrome/Safari (particularly when using center) are slightly different. Essentially, it has to do with sub-pixel rounding.

Simply add or subtract a pixel to your images on the axis that has an odd number length, to make them an even number (ie - instead of 100x123, make it 100x124) and you should be golden.

No need to use Javascript, this can certainly be achieved using just CSS. In my opinion, your best bet is to use the technique discussed in this article on CSS Sprites: http://www.alistapart.com/articles/sprites.

Essentially, for each item on your desk, place the hovered and non-hovered image in same image, one on top of each other, so that the top area has the non-hover state, and the bottom area has the hover state. Your code will probably look like this modified:

div#keyboard2 {
    position: absolute;
    left: 89px;
    top: 256px;
    width: 67px;
    height: 160px;
    background: url(../images/keyboard.png) 0 0 no-repeat;
}
#keyboard2:hover { background-position: 0 100%; }

Your desk image will then be empty, and of your items will just be on top of it.