test wraps below bullet ul li

Question

As a requirement at work, I have to use someone's stylesheet and I'm having trouble trying to override one behavior. The unordered list elements <li> are having text that exceeds 1 line wrap around to the area below the bullet point. Here's the CSS that is causing the behavior:

ul
{
  list-style: none;
  list-style-position: inside;
  padding: 0;    
}

li 
{
  list-style-type: disc;
  list-style-image: none;
  margin-left:0px;
  margin-bottom: 5px;
} 

Here's a fiddle for that: http://jsfiddle.net/CP32B/1/

What attribute do I need to override so that I can get the text to align like it does by default? (Example of default behavior: http://jsfiddle.net/B5jPH/ )

Answer 1

list-style-position: inside; is the property which causes that behavior and inorder to fix that, you need to use outside

Demo

Answer 2

Applying padding:0 with list-style-position: inside; is hiding the bullets.

You can left align the bullets without text flowing below it by changing it to the following

ul
{ 
 padding-left:10px;
}

JSFiddle

Answer 3

ul { list-style-position: outside !important; padding-left: 2em !important;
}

!important will override the css