Make Lists Align Properly

Bulleted lists can present many issues in formatting in older and newer browsers.  I consistently run into a problem where my bulleted lists will slam up against the far left side of my division.

The fix for this issue is to use CSS to replace the standard bullet image with a left side margin and a background image as the bullet, or to remove the bullet image completely by placing a transparent background image as the bullet.

The CSS for the ul and li is as follows: 

ul  {
     white-space: normal;
     display: block;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     margin-left: 5px;
}
li  {
     margin: 0px;
     padding-top: 0px;
     padding-right: 0px;
     padding-bottom: 3px;
     padding-left: 10px;
     list-style: disc url(none) outside;
     background-image: url(../images/bullet/bullet.gif);
     background-repeat: no-repeat;
     background-position: left top;
}