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?

Khaki

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;
}

Mercenary

This gives different indentation on Chrome vs Firefox – Curtal

I changed list-style to outside disc none; to get it working in Chrome! – Nimbostratus

Note that the list-style property for <ol> lists is decimal. – Lovemaking

Answer 2

The only thing I had to add to the accepted answer was text-indent since I was using fontello bullets:

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

li{
    padding-left: 1em;
}

Friedrick

The text-intent does something for me but my problem is having custom images for my bullet points. Currently looking into how to fix it as my third row of one of my lis is causing the problem with indentation. – Jone

Got it. For me, I had a ul with three lis and only the middle li was longer text and while in Chrome responsive iphone5/SE was the third line of the li all the way to the left and not inline with the rest of the elements. I have custom checkmark images for my bullets and therefore couldn't try some of the suggested answers. I gave just that one li a class and padding-left: 30px; and that fixed it for me. – Jone

Answer 3

Use a CSS reset first, then adjust your CSS accordingly.

Overrefinement

Thanks for the info, that should work. Not sure when I'll have the time to implement that, but I like the idea. – Khaki