IE CSS link jumping issue

[xgothmogx]

Hi this is my first post here and I'm wondering if someone can help? Here is my css code:

#linkcontainer ul
{ font-size: 11px; list-style-type: none; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 17px; margin: 0 0 2px; padding: 0; }
#linkcontainer a
{ text-decoration: none; display: block; width: 140px; height: auto; }
#linkcontainer a:link, #linkcontainer a:visited
{ color: #4c3c2c; text-decoration: none; margin: 0 0 2px; padding: 0; }
#linkcontainer a:hover
{ color: #e8e1be; background-color: #a5926c; text-decoration: none; margin: 0 0 2px; padding: 0; }
#linkcontainer a:active { color: #000; background-color: #cbc092; background-position: left 0; text-decoration: none; margin: 0 0 2px; padding: 0; }

This code works fine in all browsers except IE. In IE the text hyperlinks jump up and down when you roll over them. It's very strange. Anyone have an idea why it would do that?
It is being applied in the page using this code:

<div id="linkcontainer">
<ul id="linklist">
<li id="active"><a href="#" id="current"><a href="http://www.linkhere.com/" target="_blank">linkhere</a></li>
<li id="active"><a href="#" id="current"><a href="http://www.linkhere.com/" target="_blank">linkhere</a></li>
<li id="active"><a href="#" id="current"><a href="http://www.linkhere.com/" target="_blank">linkhere</a></li>
</ul>
</div>

Thanks!

[Diane Clancy]

Hi -

I don't know much but in making my menu, at one point I got very stuck with the pop-out links vibrating.

I think it was because 2 different pieces of the css were set - one as relative and one as absolute.

But I am not positive and don't know enough to debug your code.

But perhaps that is the problem. I hope this might be helpful.

Diane

[SuzyUK]

Welcome to WebmasterWorld xgothmogx!

it is a hasLayout [webmasterworld.com] error combined with a "whitespace in lists" bug perhaps, it is triggered by putting

display: block;

onto an <a> within a list element..

usually the solution involves floating either one or both of the <li> and <a> elements with the same width as the enclosing <ul>

You might want to fix the HTML too if what you actually have is the code in the OP, it is giving a double whitespace problem ;)

[edited by: SuzyUK at 8:47 pm (utc) on Feb. 20, 2007]

[xgothmogx]

Thanks! I'll take a look.