Reverse-Ordered Lists Example

In this example, we are reversing the display direction of an ordered list. It is actually pretty easy to accomplish this task using fixed heights, but for fun, we're doing it in scalable measurements. While this isn't entirely useful, it is still an interesting experiment.

1. Item 1
2. Item 2
3. Item 3
4. Item 4
5. Item 5
6. Item 6
7. Item 7
8. Item 8
9. Item 9
10. Item 10

This paragraph demonstrates how the negative bottom margin on the ordered list comes into effect. We want to keep everything nice and snug up to it.

Important Notes:

• If the ordered list does not have a top-margin or has a border, the list-item numbers are removed in IE/Mac and IE/Win.
• Firefox and Mozilla based browsers do not collapse the margins on the list-items correctly without a bottom-border.
• The formula works for an arbitrary number of items, assuming that the fixes and notes are followed correctly.

Return to my Projects page.

The example on this page is free knowledge Use it anywhere you like. Make sure to use your browser's View Source option to see what is happening on the page.