Alignment Problem

IE problem in dropdown menu

[vincevincevince]

I'm using the following code which works fine in Firefox but doesn't work in IE:

<div id="topmenu">
 
<div><!--first dropdown-->
<a href="main.html">main</a>
<span>
 <li><a href="sub1.html">sub1</a></li>
 <li><a href="sub2.html">sub2</a></li>
 <li><a href="sub3.html">sub3</a></li>
</span>
</div>
 
<div><!--second dropdown-->
<a href="main.html">main2</a>
<span>
 <li><a href="sub1.html">sub1</a></li>
 <li><a href="sub2.html">sub2</a></li>
 <li><a href="sub3.html">sub3</a></li>
</span>
</div>
 
</div>

Here's the CSS:

#topmenu {overflow:none;height:40px!important}
#topmenu div {float:left;width:121.5px}
#topmenu li {width:121.5px;display:block}
#topmenu span {display:block;position:absolute}

In Firefox the Span and LI elements nicely drop below the DIV element. In Internet explorer, they appear about 80% to the right and not all-the-way below the DIV element.

I'm using the <span> because I use javascript to turn on and off the display of that whole span.

What am I missing? Is there an easier way?

[Setek]

It's because IE (6 & 7 are what I know of) have a different idea about initial starting position of absolutely positioned elements.

Firefox, Opera et al. will place the element in a spot you would expect - that is to say, if the element were positioned statically, it would be in that spot, so as it's positioned absolutely, it initially should still be in that spot.

IE places it at the end, somewhere to the far right usually.

The way I combat this is using conditional comments :) Just set a negative left margin until it hits the right spot. I am unaware of any pure solution, so I resort to using differing property values.

[vincevincevince]

Setek, I will try that - it sounds like it should work, thanks.

[SuzyUK]

I think if you use the code as you have it you will have further problems with indents on the orphan li's - li's should have a parent <ul> rather than your <span> - and block elements, <li>'s, should not be inside <span> which is an inline element.

The positioning problem can be fixed more easily than negative margin workarounds by making the <a>'s into block level display elements IE will position properly if positioning to a block element as opposed to an inline one, so that first <a> in the code should be display:block, but because the <li>'s are of a fixed width, all the <a>'s could be made block display without much fuss.

a more usual way to mark up this type of scenario is to use lists - but the same fix applies whichever way you do it, though in your way it's going to be harder to lose the indent of the child <li>'s

e.g.

<ul><!--first dropdown-->
<li><a href="main.html">main</a>
<ul>
<li><a href="sub1.html">sub1</a></li>
<li><a href="sub2.html">sub2</a></li>
<li><a href="sub3.html">sub3</a></li>
</ul>
</li>
</ul>

CSS:
#topmenu {overflow:none; height:40px!important;}
#topmenu ul {float:left; width:121.5px; margin: 0; padding: 0; list-style: none;}
#topmenu li, #topmenu li a {width:121.5px; display:block;}
#topmenu ul ul {position:absolute;}

The rule in red should fix the positioning and the bit in blue gives you control over the bullets and indents

Suzy