Bestsellers Display Bug?- BareBones template

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

etc.

The URL for this problem?

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.

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.

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

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

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

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 //-->

Change this> shrimp-gumbo-mmmhhh:

#bestsellers ol {
padding: 0;
margin: 0 0 0 1.5em;
}
To this> #bestsellers ol {
padding: 0;
margin: 0 0 0 2em;
}

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.