CSS3 Columns: Firefox and Chrome different behavior

Question

I have a website with an unordered list essentially like

      <ul class="subnav-links">
        <li class="">
          <a href="/de/t/new">New In</a>
        </li>
        <li class="">
          <a href="/de/t/sale">Sale</a>
        </li>
        <li class="">
          <a href="/de/pages/best_looks">Looks</a>
        </li>
        .... more lis omitted
  </ul>

and css:

.subnav-links {
     -webkit-columns: 8 auto; /* Chrome, Safari, Opera */
    -moz-columns: 8 auto; /* Firefox */
    columns: 8 auto;
}

On this website Chrome shows the list items correctly in 8 columns but Firefox shows only 1 column.

Why is it so? And how can i fix it?

PS I wrapped also the subnav-ul inside a div.subnav-columns and styled the div with the columns property but Firefox keeps showing just one column.

Answer 1

Hav'nt you tried using this and applying it to CSS:

.subnav-links li { 
    display:inline-block; width:100% 
}

Answer 2

ok, I've found it. I had a wrong nested @-moz-document url-prefix() in my stylesheet.