unordered list indentation bug in IE?

Giganews Newsgroups
Subject: unordered list indentation bug in IE?
Posted by:  simplico (simpli…@gmail.com)
Date: 3 Aug 2006

I'm creating an unordered list that fits in a defined width on the left
side of the page.  It works fine in FF but IE is another story.

Here is a watered-down version of the code:

<html>
<head>
        <title>Untitled</title>
        <style type="text/css">
        * {margin: 0px; padding: 0px; border: 0px; border: 1px solid
red;}
        </style>
</head>

<body>

<div id="links_rail" style="margin-left: 50px;">

<ul id="links" style="width: 100px; list-style: none inside
url(image.gif);">
        <li>-the quick brown fox jumped</li>
        <li>-over the lazy dog.</li>
        <li>-the quick brown fox</li>
        <li>-jumped over <br> the lazy dog.</li>
        <li>the quick</li>
        <li>brown fox</li>
</ul>

</div>

</body>
</html>

Basically, is there a way to get the list items to indent at the same
position of the first list item after the image.

It should look like so (like it does in FF):

-----------------------------
*  the quick brown
    fox jumped
*  over the lazy
    dog
*  the quick brown
    fox
*  jumped over
    the lazy
*  the quick
*  brown fox
-----------------------------

But it looks like this in IE:
-----------------------------
*  the quick brown
fox jumped
*  over the lazy
dog
*  the quick brown
fox
*  jumped over
the lazy
*  the quick
*  brown fox
-----------------------------

Thanks.  Let me know if you need any more information.  I've been
searching for weeks to find an answer but maybe I'm not searching for
the right things.

Replies