IE7 & IE8 rendering problem - text moving

Question

We just rolled out a new application on our site, www.net54baseball.com. Using Javascript, we are allowing users to Show or Hide the app. When the user clicks Show, the app opens and exposes a list of hyperlinks. It functions perfectly in Firefox and Chrome. However, in IE7 & IE8, the hyperlinked text appears properly for a split second, then drops down about an inch. When the user's mouse passes over each link, it moves back up to its correct spot. Firefox/Chrome users love the app, but this is extremely frustrating for IE users.

The app is on this page: www.net54baseball.com

Why does the text drop down after opening? How can I prevent this behavior in IE?

Thanks in advance.

Scott Greenwald

Answer 1

I haven't tested this, but here's a trick that's worked for me in the past when IE has "painting" issues. After you "Show" the element, set the element style to "position: relative;". This should force IE to repaint the element and position it back to where it needs to be. If that doesn't work, try adding a setTimeout after you show the element and then change the style to "position: relative;" inside the setTimeout callback.

I hope this works for you.

Answer 2

This worked for me as well. The text was moving to the bottom of the screen. It happened in IE8 but was working fine in Firefox.