I ran aross this problem with the way Internet Explore 7 (IE7) handles the background-position css property, and thought I’d post it just in case I could save someone some time. I was working on a layout, and it looked great in IE8, Firefox 2, Firefox 3 & Google Chrome 2. When viewed in IE7, however, the background-position of one of the elements was off.

After a bit of experimentation, as is a normal part of cross-browser testing with Microsoft Internet Exploder, I narrowed down the problem to the fact that I had overflow hidden for this particular element. All other browsers used the declared dimensions of the element to position the background. The problem is that there was some overflow, and all browsers but IE7 properly ignored it. IE7 used the dimensions including the overflow to determine the background-position.

In this situation I was able to size the element in such a way to eliminate the possibility of overflow, and then was able to remove the overflow:hidden declaration.