Reproduced something similiar, this has a big <ul> covering a number
of <p>s, each
of which has a mouseover. In firefox this works as expected, the
mouseovers don't
fire, in IE the mouseovers do fire.
If I make every <LI> have the same content then this works in IE as
well. The
conclusion would seem to be that although the background-color makes
it appear that all the <li> cover the same width in reality they only
cover up to the end of their
contents (in IE)
What can I do about this?
<body>
<form>
<style>
..TopDiv
{
position: relative;
z-index: 9999;
}
..TopUl
{
position: absolute;
top: -100px;
left: -30px;
z-index: 9999;
}
li
{
position: relative;
left: -20px;
z-index: 9999;
}
</style>
<p> <span onmouseover="alert('hi1')">hi</span>
<p> <span onmouseover="alert('hi2')">hi</span>
<p> <span onmouseover="alert('hi3')">hi</span>
<div class=TopDiv>
<ul class=TopUl>
<li style="background-color: red;"> ----------------------------
<li> ----------------------------
<li style="background-color: red;"> ..
<li> ----------------------------
<li style="background-color: red;"> .
<li> ----------------------------
<li style="background-color: red;"> .
<li> ----------------------------
<li style="background-color: red;"> .
<li> ----------------------------
<li style="background-color: red;"> .
<li> ----------------------------
<li style="background-color: red;"> .
<li> ----------------------------
<li style="background-color: red;"> .
<li> ----------------------------
</ul>
</div>
</form>
</body>
