Sibling Selectors Fail in IE for <li> Tag

[wardrop]

Example (works in firefox & chrome, fails in IE6/IE7):

<ul id="test_div">

<li>block1</li> <ul>block2</ul>

</ul>

<script type="text/javascript">

$("#test_div li + ul").click(function () {

alert('Success');

});

</script>

Seems to apply to every tag following a <li> tag (ie. "li + div" also fails), except for "li + li". Bug also seems to apply to the "li ~ ul" syntax.

[wardrop]

This ticket may be closed. The reason this is happening is because placing anything inside a <ul> element, outside of a <li> element is invalid. Most browsers don't mind this and leave the code as is, but IE6/IE7 shifts the out of place element into the previous <li> element.

In other words, this...

<ul> <li>item</li> <li>item</li> <div>content here</div> <li>item</li> </ul>

becomes... <ul> <li>item</li> <li>item <div>content here</div> </li> <li>item</li> </ul>