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.