Bestsellers Display Bug?- BareBones template

[shrimp-gumbo-mmmhhh]

1.3.8a If I have more than 9 items in the bestsellers sidebox it numbers them incorrectly.

1.
2.
3.
4.
5.
6.
7.
8.
9.
0.
1.
2.
3.
4.
5.
6.
7.
8.
9.
0.
etc.

[Kim]

The URL for this problem?

[DrByte]

I can't replicate that scenario on a clean install of v1.3.8a. The bug must be in the styling you've done in your template.

[shrimp-gumbo-mmmhhh]

I can't replicate that scenario on a clean install of v1.3.8a. The bug must be in the styling you've done in your template.

Thanks! This appears to be an issue with the barebones template.

[shrimp-gumbo-mmmhhh]

Can anyone give a hint as to why the template would be causing the sidebox to count incorrectly?

[Kim]

It isn't counting wrong - it is displaying incorrectly - look at your stylesheet.

[shrimp-gumbo-mmmhhh]

I don't know anything about css....... to my untrained eye I don't see where the problem is.... pointers? Am I looking at the right css items?

I don't see the items being numbered in the html but see them on the screen!

The barebones stylesheet has this:

#bestsellers ol {
padding: 0;
margin: 0 0 0 1.5em;
}

while my current template has this:

#bestsellers .wrapper {
margin: 0em 0em 0em 1.5em;
}
#bestsellers ol {
padding: 0;
margin-left: 1.1em;
}
#bestsellers li {
padding: 0;
margin: 0.3em 0em 0.3em 0em;
}

The barebones bestsellers looks like this:

<!--// bof: bestsellers //-->
<div class="rightBoxContainer" id="bestsellers" style="width: 150px">
<h3 class="rightBoxHeading" id="bestsellersHeading">Bestsellers</h3>
<div id="bestsellersContent" class="sideBoxContent">
<div class="wrapper">
<ol>
<li><a href="">Product 1</a></li>
<li><a href="">Product 2</a></li>
<li><a href="">Product 3</a></li>
<li><a href="">Product 4</a></li>
<li><a href="">Product 5</a></li>
<li><a href="">Product 6</a></li>
<li><a href="">Product 7</a></li>
<li><a href="">Product 8</a></li>
<li><a href="">Product 9</a></li>
<li><a href="">Product 10</a></li>
</ol>
</div>
</div></div>
<!--// eof: bestsellers //-->

while my current template bestsellers code looks like this:

<!--// bof: bestsellers //-->
<div class="leftBoxContainer" id="bestsellers" >
<h3 class="leftBoxHeading" id="bestsellersHeading">Bestsellers</h3>
<div id="bestsellersContent" class="sideBoxContent">
<div class="wrapper">
<ol>
<li><a href="">Product 1</a></li>
<li><a href="">Product 2</a></li>
<li><a href="">Product 3</a></li>
<li><a href="">Product 4</a></li>
<li><a href="">Product 5</a></li>
<li><a href="">Product 6</a></li>
<li><a href="">Product 7</a></li>
<li><a href="">Product 8</a></li>
<li><a href="">Product 9</a></li>
<li><a href="">Product 10</a></li>
</ol>
</div>
</div></div>
<!--// eof: bestsellers //-->

[kuroi]

Change this

#bestsellers ol {
padding: 0;
margin: 0 0 0 1.5em;
}

To this

#bestsellers ol {
padding: 0;
margin: 0 0 0 2em;
}

[shrimp-gumbo-mmmhhh]

Thank you! That did it....

Now... here is what I have learned:

margin: 0 0 0 2em;

the 1st 0 is the top margin
the 2nd 0 is the right margin
the 3rd 0 is the bottom margin
and the 2 is the left margin

em :: 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses

http://www.w3schools.com/css/css_margin.asp

now why making the margin bigger allows the 1st digit of the 10 to show... I don't understand.