Lists Next to Images

Topics on this page:

1. Placing a list by an image
2. An IE 5 bug?

Placing a list by an image

You can place a list next to an image that's left- or right-aligned. Here's an example:

• Item #1.
• Item #2.
• Here's the inner list:
  1. Item #1.
  2. Item #2.
• Here's one more item

<img src="browndot.gif" width="100" height="200" alt=""
     align="left" hspace="10" />
<br />
Here is a nested list:
<ul>
  <li> Item #1. </li>
  <li> Item #2. </li>
  <li> Here's the inner list:
    <ol>
      <li> Item #1. </li>
      <li> Item #2. </li>
    </ol>
  </li>
  <li> Here's one more item </li>
</ul>
<br clear="all" /><br />

An IE5 Bug?

If you're viewing this with Netscape or IE 4 or older, you see the above example looking like a nice nested list. But if you're using IE 5, you may find that it doesn't look like a list at all! Here's how I see them - IE 4 on the left and IE 5 on the right:

You can avoid this problem by putting the list into a table:

<img src="browndot.gif" width="100" height="200" alt=""
     align="left" hspace="10" />
<table><tr><td>
<br />
Here is a nested list:
<ul>
  <li> Item #1. </li>
  <li> Item #2. </li>
  <li> Here's the inner list:
    <ol>
      <li> Item #1. </li>
      <li> Item #2. </li>
    </ol>
  </li>
  <li> Here's one more item </li>
</ul>
<br clear="all" /><br />
</td></tr></table>