a:hover and background-position issue with ie6

mezema · June 14th, 2006, 10:04 AM

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!

masonbarge · June 14th, 2006, 11:29 AM

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.

ukgeoff · June 14th, 2006, 12:32 PM

Not what you asked but I think should should rethink the scroll bar issue. Three vertical scroll bars and one horizontal one on one page is just...

Site completely broken in Opera. Suggest you take a look.

Footer out of place in IE 6.

W3C validation shows 24 errors.

mezema · June 14th, 2006, 12:55 PM

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

ukgeoff · June 14th, 2006, 02:00 PM

At this stage I would design for a fixed width of *00px which means your actual working area is about 770px max.

Have a container div and have the race car image as a background for that.

Within the container have a header, centre and footer div. Don't use any positioning on them. Let them naturally follow each other.

For the two elements within the centre section, use float: left and margin/padding to get them where you want.

Start with that and see how you go.

mezema · June 15th, 2006, 12:32 PM

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