Three problems with IE 7 - rollovers, cut-off text and cut-off images

I'm seeing the same issue described in Problem 1 -- I've got an ASP.Net menu that works just fine in IE6 & Firefox -- but it moves down (a white gap is inserted) when it is mouseovered. And it stays in the new position until/unless you refresh the page a couple times. Of course it just moves again the next time you mouseover it.

Did you find a solution to Problem 1 I haven't been able to find anything yet.

Hi,

I tried to access your test page but it apparent is taken off already. I have a similiar problem before (as I haven't seen your html code, I can't say for sure it is the exact same problem.) with gap appearing between menu items in my css menu.

I coded my own css menu but I am sure it is using pretty much the same techique you'd find on the internet. My code works fine in firefox, opera, safari and ie6 but gaps will appear in ie7.

My CSS menu structure was as follows:

<div class="mainMenu">

<ul>

<li><a href="someurl1.html">menuitem1</a></li>

<li><a href="someurl2.html">menuitem2</a></li>

<li><a href="someurl3.html">menuitem3</a></li>

</ul>

</div>

Ran out of things to try, I tried to remove all the white space between all menu items and Voila--the gaps disappear.

ie:

<div class="mainMenu"><ul><li><a href="someurl1.html">menuitem1</a></li><li><a href="someurl2.html">menuitem2</a></li><li><a href="someurl3.html">menuitem3</a></li></ul></div>

I'd strongly recommend you to try this. I wish I didn't have to remove the space as the code is not very readable this way, but I wouldn't complain as long as it works.

I hope this information helps.