Indenting of List items (bullets)

I noticed when creating a list of items in a product record detail description box it displays it with the text left aligned and the bullets to the left of the above test.  On the editing screen the formatting is correct.

For example:

  On the editing screen
     . item one
     . item two

  One the browser screen
. item one
. item two

I am using IE10 so I switch to Chrome but got the same result.
Any idea of what I need to configure to have it output to browsers the same as it shows when editing?

You can add the following to your stylesheet (Themes\DefaultClean\Content\styles.css):

.product-details-page .full-description ul, 
.product-details-page .full-description ol { margin-left: 25px; }

Adjust the value (25px) for your preferred amount of indentation.

.

That worked great!


Thanks

Another issue of list items not indenting.  I installed Quick Tabs from nop-templates.com
Now the <li> list items (Bullets) are not indenting anymore.  nop-templates said it was a problem with the default clean template and offered the following code to fix it.

.productTabs-body .ul
{
padding-left: 20px;
}


That made no difference.  Can someone recommend how to address indenting of list items in the default clean template?

If you inspect the element by right clicking in chrome, or use developer tools (F12) in IE and navigate the the <li> element you will be able to see which styles are taking priority and remove/add necessary styles.

Hope this helps,

Thanks

Charlie

Charlie,
Great input.  I never knew about the inspect or f12 options

The code I see uing inspect under crome is:
<div id="tabs" class="producttabs ui-tabs ui-widget ui-widget-contnet ui-corner-all" style="margin-top: 10px">
    <div class="producttabs-header>.../div>
    <div class="productTabs-body">
        <div id="tabs-description" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom"
             role=tabpanel" aria-expanded="true" aria-hidden="false" style>
             <p>...</P>
             <ul>
                 <li>
                     <span style="font-size: small;Flexible Pricing Programs</span>
                  </li>

The code provided to correct this which had not effect was:

.productTabs-body .ul
{
padding-left: 20px;
}

I modified it to the following based on other styles defined and the input from crome element inspection and this works:

.productTabs-body ul,
.productTabs-body ol { padding-left: 25px; }

Thanks for the suggestion.

Not a problem I find it very useful, just a tip: you can edit the styles using inspector to see changes without having to commit, great for finding and fixing design issues.