Question

I have a few lists on my webpages that look like this:

        > lorem
    ipsum

And I want them to look like this:

        > lorem
          ipsum

If you could even help me how to properly phrase the question I am after I would much appreciate it.

Answer 1

list-style-position is the CSS attribute you want, in particular setting it to “outside” – http://www.w3.org/TR/CSS2/generate.html#list-style

The w3 descriptions are confusing for the outside but the key is that inside places the marker as the first inline item in the content.

http://jsfiddle.net/chrisvenus/uQNPk/2/ has an example showing the results for inside and outside.

I believe that “outside” is usually the default which leads me to believe that you may have something in your stylesheet overriding this explicitly or possibly you are using some kind of reset stylesheet that has different defaults than you want.

Simply put the following should sort you out assuming no overriding from other stylesheet elements:

ul, ol
{
        list-style-position: outside;
}

You may also need to fiddle with the left margin to make sure your bullets don’t hit something you don’t want them to…