IE: CSS Misalignment issue in UL/LI

Im encountering a misalignment issue with IE. Below is a sample output. When IE creates a second line due to the long text, the whole paragraph gets mis aligned. Making the 2nd line pulled to the left. I want the first and second line to be aligned to the left. Just like a normal text-align: left will do.

http://img.photobucket.com/albums/v682/markeeh/alignment_tissue.jpg

Below is the code:

<style>

.ul_content-l { width:330px; list-style:square inside; margin-left: 295px; padding-left:1em; text-indent:-1em; line-height:16px; }

</style>

<ul class="ul_content-l">

<li style="border: 1px solid black;">Modular carpet offers hospitals and care homes a calming environment to speed patient recovery</li>

<li>Hygienic guarding against bacteria through Intersept&reg; antimicrobial protection</li>

<li>Improved patient comfort and well-being</li>开发者_如何学Python <li>Therapeutic surroundings with less noise and less stress</li>

<li>Use of colour and design for more cheerful facilities </li>

</ul>

Hope someone other there is willing to help. Thanks. :)

use this

.ul_content-l { 
    width:330px;
    list-style:square;  
    margin-left: 295px;
    padding-left:10px;
    line-height:16px; 
    }

Try to reset margins for li and ul.

Like:

ul, li {margin:0;padding:0;}

and than just set them again the way you want with

ul.ul_content-l { code here }
ul.ul_content-l li { code here }

Also try to be consistent and use only px or only ems.