Css list problem

advertisements

How can I fix my css list problem form text displaying like this inside a div tag.

# ordered lists - the
list items are marked with numbers or letters

To display like this when inside a div tag.

# ordered lists - the
  list items are marked with numbers or letters.

here is the html.

        <div>
            <h2>header</h2>
                <ul>
                    <li>ordered lists - the list items are marked with numbers or letters</li>
                    <li>ordered lists - the list items are marked with numbers or letters</li>
                </ul>
        </div>

CSS.

div {
    margin: 0px 0px 15px 0px;
    padding: 0px 0px 5px 0px;
    background: #fff;
    float: right;
    width: 302px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 3px solid #fff;
}

div h2 {
    text-indent: 10px;
    margin: 0px;
    padding: 5px 0px 5px 0px;
    font-size: 1.4em;
    width: 302px;
    color: #fFF;
    border-bottom: 1px dotted #fff;
}

div ul {
    padding: 0px;
    margin: 0px;
    line-height: 20px;
    width: 308px;
}

div li {
    list-style-position: inside;
    border-bottom: 1px solid #fff;
    padding: 5px 10px;
    margin: 0px;
    width: 282px;
    color: #ffffff;
}


The first one is list-style-position: inside, the other one is list-style-position: outisde and some padding.