Summary:  While IE8 recognizes an empty <li style=”list-style: none;”></li> object and spaces correctly, Firefox and Google Chrome, ignore the object and space the following <li> immediately where the hidden <li> might appear.   Adding a   nbsp causes all three to act consistently.

Today, I needed to edit some online content and for reasons related to the content, I had to start an <ol> at 2 instead of 1.   This seems like an easy enough task, but a quick glance around the web and I didn’t see a way to do this with CSS.   I was expecting some attribute like I start an ordered list at a certain number.   The counter attribute seemed like it could be used for this but after a short review, I didn’t see how to make it work for my purposes.

To clarify, I’m attempting to achieve the following:

So my first attempted solution was to create an empty <li> and set css attribute display: none.    To my surprise, the list element was smart enough to reorder and identify my second list item as 1.

My second attempt worked better.     I set the list-style: none for the <li>.

<li style="list-style: none;"></li>

The result looked correct in IE8, however, there was too much spacing so I added a margin-bottom to compensate.

<li style="list-style: none; margin-bottom:-15px;"></li>

So now it looks perfect in IE8, however,  Firefox and Chrome render as if the object isn’t there.   Solution is to add a   to the li content and issue resolved.

<li style="list-style: none; margin-bottom:-15px;"> </li>