a:hover and background-position issue with ie6

I've created a load of rollover buttons using css so when the link is rolled over, the background-position is changed making the background image of the link move over (to its over state). This works fine in most browsers and does actually work in ie.

However, the problem is that when you roll over the link, the containing area is enlarged for some reason. Can anyone explain why this is happening. Check out the page at http://www.i4cevents.com/new/pages/results.htm
and try rolling over the main buttons along the left hand box.
The css for that is simply

.resultIcons a:hover{
background-position:-71px 0;
color:#545454;
text-decoration:none;
}

I'm pretty sure the changing of background position is the reason for the weird content area enlargement, because when I take out the background-position line, the problem doesn't occur (of course, the images don't change either).

Any help, VERY much appreciated. Regards.


Also, I know about the horrible looking PNG's and I'm working on that. ONE THING AT A TIME!

Sorry, I tried and I couldn't find it. I will point out, though, that you also have another similar problem in IE7 -- the paragraphs in the right lower box expand right when you roll over the pix.

I remember seeing someone else with this problem a month or two ago -- I think it's somewhere on Webforumz. What is strange is that the width doesn't revert back when you stop the hover.

thanks for that. I'm trying to make the thing liquid layout and its proving to be harder than I thought. I know what the errors are: stuff like using inline lists and fixed positioning on elements. ie doesn't support that stuff yet (hopefully).

Do you think it would be better to create a fixed width layout instead. It would give me more control over the elements and their sizes. This would stop millions of scrollbars appearing everywhere.

With regard to the footer, since I'm using fixed positioning on it, I had to use absolute positioning on it in the ie6 style sheet. How can I make it position correctly?

This is slowly turning into a nightmare and it was originally supposed to be a really simple looking site.

Cheers

I've sorted out the original problem now (and got the site working in opera ).

I just stumbled across it, but if the links that you roll over are set to relative positioning, the containing area expands once but doesn't go back when you roll off.

When I set the anchor tags to absolute positioning (just for ie), the problem was fixed. Any care to explain why this should work (cos it does)? Cheers