:hover moving unrelated images in IE7

[Keleth]

I was hoping someone could lend me a hand/thoughts on this...

http://test.bitballot.com/login/101

Very simply, hovering over the buttons shifts the border of the login box, as well as the border of the section, even though the css for that page has nothing to do with either of those elements. Can anyone lend me any thoughts?

[Medyman]

Hmm...very peculiar.

I can't pinpoint why that's happening. But, it's certainly due to the over-usage of divs to create that border. There are better ways to do it that require less markup.

I suspect if you can trim that down, you'll get rid of the problem.

[Keleth]

Can you suggest anyway to do it? I've seen sliding-door borders before that used that many... I can't think of any other way to do it without ending up doing something like fixing the width.

[Keleth]

I updated the code to reduce the number of divs by making it less sliding door. The issue still persists, because of the buttons.

[Snookerman]

Take a look at this tutorial:
http://css-tricks.com/video-screencasts/24-rounded-corners/
My recommendation would be to use CSS3 to create the rounded corners. That would only work in Fx and Safari but hopefully other browsers will catch on.

Good luck!

[Keleth]

Thanks for the tutorial, although I have no difficulty with rounded corners :-)

However, even without the border, the issue persists. I've figured out it has something to do with the buttons, but for the life of me, I can't figure out what.

[Snookerman]

Well, whatever you did it seems to work because I don't get the shift anymore in IE7. Does it still do it for you?