li indentation not correct when wrapping around - html

Question

I want to have wrapped contents automatically indent according to the first line. In order to do this I have used the following HTML and CSS code:
li {
padding-left: 10px;
text-indent: 10px;
}
.Slides {
width: 20em; //Showing wrap-around
}
<div class="Slides">
<div>
<h1>My heading</h1>
</div>
<div>
<li>First line</li>
</div>
<div>
<li>Second line which is very long, must have the same indentation (when wrapped to next line) as that of the first line.</li>
</div>
</div>
This gives me a nice indentation in case of multiple lines but only in webkit browsers. In Firefox and IE the contents are overlapping with the bullet point.
In order to check for this I have also tried wrapping the contents inside li elements. But this again gives me very different layout across browser. How can I achieve a consistent behaviour in all browsers?

Answer 1

Please try this. I wrapped li tags in ul. sometimes it creates issue if li's are not wrapped properly in ul's
<div class="Slides">
<div>
<h1>My heading</h1>
</div>
<div>
<ul>
<li>First line</li>
</ul>
</div>
<div>
<ul>
<li>Second line which is very long, must have the same indentation (when wrapped to next line) as that of the first line.</li>
</ul>
</div>
</div>

Answer 2

Dont use the <li> element at all. Just use plain old <p> elements and style the indent purely with css. You can even use a glyphcon or css to add the bullet point back if youd like. Also in css if something works in one browser and not others, try adding vendor prefixes. Sometimes a browser dev adds features in beta, so you have to ad the vendor prefix to use them.