CODEWITHSUNDEEP
cssfirefoxrenderinglistitem
Marc Boivin
Marc Boivin

Reputation: 9

display: list-item not working properly in Firefox?

I'm pretty sure it's documented somewhere, but my Googling and looking at the mdn didn't give me anything substantial to go on.

Consider the following example: 

<doctype html>
<html>

  <head>
    <title>Array test</title>
  </head>

  <body>
    <style scoped>
      div {
        margin: 20px;
        padding: 20px;
        display: list-item;
        list-style-type: decimal;
      }
    </style>

    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
  </body>

</html>

If you render it in Chrome or safari, or any webkit browser I could get my hands on the div will be numbered 1, 2, 3, 4. But in Firefox all items will be 0.

Is there a way around this? In pure CSS?

TIA

Upvotes: 1

Views: 1572

Answers (2)

Boris Zbarsky
Boris Zbarsky

Reputation: 35074

If you want to use a pure CSS solution, you could explicitly use a CSS counter, right?

Upvotes: 1

ScottS
ScottS

Reputation: 72261

I've found a post and a site (Section L) that note this to be (has been) a bug in Firefox.

The only solution I have found is that the div items must be wrapped by an ol: http://jsfiddle.net/Rvux3/3/, which, of course, is not a pure CSS solution, nor would it validate (you might as well use li items if you are going to have the ol).

Upvotes: 0

Related Questions