Notice: This website is an unofficial Microsoft Knowledge Base (hereinafter KB) archive and is intended to provide a reliable access to deleted content from Microsoft KB. All KB articles are owned by Microsoft Corporation. Read full disclaimer for more details.

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


View products that this article applies to.

This article was previously published under Q260991

↑ Back to the top


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.

↑ Back to the top


Resolution

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

↑ Back to the top


Status

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

↑ Back to the top


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>
				

↑ Back to the top


Keywords: KB260991, kbnofix, kbdhtml, kbbug

↑ Back to the top

Article Info
Article ID : 260991
Revision : 2
Created on : 5/10/2003
Published on : 5/10/2003
Exists online : False
Views : 319