html - Cross Browser Compatible Hanging Indent for Lists

Question

I have an unordered list where I'm trying to control the hanging indent. On items that overflow onto two lines, I want the second line of text to line up directly under the previous line of text (not underneath the bullet point). I've got this to work in Chrome exactly the way I want it. However it's a little off in Firefox and Internet Explorer.

Here's what I currently have:

<ul style="list-style: disc inside none; margin-left: 0; padding-left: 1em; text-indent: -1em;">
<li>50 – 180</li>
<li>950 – 2150</li>
<li>Dual IF: 70/140, L-Band & L-Band monitor (standard)</li>
</ul>

Is there any way to make this render the same in all browsers?

Answer 1

Remove text-indent, change list-style to outside, and apply a padding-left to your li elements:

ul {
    list-style: disc outside none; 
    margin-left: 0; 
    padding-left: 1em;
}
li {
    padding-left: 1em;
}