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 <brthe 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.
unordered list indentation bug in IE?
