IE7 <li> bullet/number outside of hover

Question

Follow-up from another post here: IE7 li bullet or number shown outside of div

In the previous post, the li element outside the div was fixed, but now I have another IE7 bug with the hover element. Since the hover element can not be set through the , how do I fix this one?

PS Obviously I've been having some trouble with the hasLayout bug in IE, so it someone was to give a nice explanation it would be appreciated.

Again everything works in firefox, etc.

The screenshots:

The code:

#create_request ol {
    width: 339px;

}

#create_request li {
    display: list-item;
    line-height: 23px;
    background-color: #E3E3E3;
    list-style: decimal;
    list-style-position: inside;
    padding-left: 25px;
    padding-top: 5px;
}

#create_request li.alternate {
    background-color: white;

}

#create_left li:hover {
    width: 356px;
    background: url('/images/list_add.png') 100% 100% no-repeat;
    background-color: #B0B0B0;
    cursor: pointer;
}

Answer 1

Unfortunately, that's not possible without bringing in another element in the <li> . The incorrect list-style-position behaviour occurs in IE6/7 when the <li> element get hasLayout . You want to totally avoid hasLayout on the element. The width is one of the hasLayout triggers.

I suggest to put a <span> in the <li> (yes, sorry if you would cry)

<li><span>Item</span></li>

and change the li:hover style as follows

#create_left li:hover {
    background: #B0B0B0;
    cursor: pointer;
}
#create_left li:hover span {
    display: block;
    width: 356px;
    background: #B0B0B0 url('/images/list_add.png') 100% 100% no-repeat;
}

This way the span controls the width of the <li> without giving it hasLayout . You only need to remove padding-top: 5px; from the <li> 's CSS and counteract it with line-height , otherwise the <span> will not get the full height.

Make it if necessary an IE6/7 conditional stylesheet.

Answer 2

I believe you need to declare "list-style-position" in the rule for your OL tag:

#create_request ol {
  list-style-position: inside;
}