IE7 shrinking dropdown menu box

Question

Hi. I have the following dropdown menu :

<div id="dropdown_menu">
 <ul>
  <li><a>Item1</a></li>
  <li><a>VeryLongLongLongItem2</a></li>
 </ul>
</div>

outer div has position: absolute, the links are highlighted.

('li' and 'a' should be of the width of the widest element in the list, so that a:hover will highlight the whole line - see left picture on the link below)

IE7 renders it in a nonstandard fashion (right picture) shrinking down the width of links to match the width of the text, despite the width:100%/width:auto property that is assigned to them.

Setting a fixed width for the list is not an option, it should scale.

Nedless to say, a pure css/html fix would be best

Answer 1

Like scunliffe said, make sure your <a>'s are display: block and that hasLayout is triggered on them. You can do this with either of these 2 css rules applied to the <a>:

height: 1%;

or:

zoom: 1;

Make sure that the height: 1% fix is only served to IE though.

Answer 2

Hi, I have vertical floating menu. Working fine in IE6,IE8 and firefox fine. But in iE7 half of the text is not showing. Do you have any idea how to fix this problem.