BUG: LI Moves Left When Nested List Has Images but No Text (260991)


The information in this article applies to:

  • Microsoft Internet Explorer (Programming) 5
  • Microsoft Internet Explorer (Programming) 5.01
  • Microsoft Internet Explorer (Programming) 5.5
This article was previously published under Q260991

SYMPTOMS

When you use HTML <LI> elements with images and no text, problems can occur with the alignment of the <LI> elements. The problems occur when:
  • <LI> or list (<OL> or <UL>) elements include images but no text. -and-

  • Additional lists are nested that do not use images.
In this situation, when you show the nested lists, the image moves to the left. Larger images move farther.

RESOLUTION

To work around this problem, add text to the <LI>. If there is no applicable text, use "&nbsp;" instead of text.

STATUS

Microsoft has confirmed that this is a bug in the Microsoft products that are listed at the beginning of this article.

MORE INFORMATION

Steps to Reproduce the Behavior

The following code demonstrate this behavior. Replace "bestwith.gif" with any image that you would like to test with. 
<HTML>
<HEAD>
<SCRIPT>
	function showItem(subItem) {
		if (document.all[subItem].style.display == "none")
		{
			document.all[subItem].style.display = "block";
		}
		else
		{
			document.all[subItem].style.display = "none";
		}
	}
</SCRIPT>
</HEAD>
<BODY>
	<UL id="LISTheader" style="list-style-image: url(bestwith.gif);">
		<LI onclick=showItem("sublist1")>
			<UL id=sublist1 style="display: none; list-style-image: none;">
				<LI>Item A</LI>
				<LI>Item B</LI>
			</UL>
		</LI>
	</UL>
</BODY>
</HTML>
Modification Type:MajorLast Reviewed:5/10/2003
Keywords:kbBug kbDHTML kbnofix KB260991
©2002 Microsoft Corporation. All rights reserved.