Side navigation
#3473 closed bug (invalid)
Opened October 12, 2008 11:49PM UTC
Closed February 07, 2009 02:39PM UTC
Sibling Selectors Fail in IE for <li> Tag
| Reported by: | wardrop | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 1.3 |
| Component: | selector | Version: | 1.2.6 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
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.
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>