CODEWITHSUNDEEP
cssfirefoxhtml-listsmultiple-columns
foxandsticks
foxandsticks

Reputation: 379

CSS Columns Failing when Used with Unordered Lists in Firefox (27)

I'm having an issue where a menu organized using unordered lists will not populate a CSS two-column layout in Firefox (27). It works fine in IE10 and Chrome (32).

I haven't been able to find any solution to this problem, but I'm guessing it cannot be unique to me. Here is a jsfiddle demonstrating the issue: http://jsfiddle.net/yGyeh/1/

And the code in the fiddle (Stack says this is required)--HTML:

<div id="container">
    <ul>
        <li>
            When
        </li>
        <li>
            I
        </li>
        <li>
            Look
        </li>
        <li>
            To
        </li>
        <li>
            The
        </li>
        <li>
            Sky
        </li>
    </ul>
    <ul>
        <li>
            When
        </li>
        <li>
            I
        </li>
        <li>
            Look
        </li>
        <li>
            To
        </li>
        <li>
            The
        </li>
        <li>
            Sky
        </li>
    </ul>
    <ul>
        <li>
            When
        </li>
        <li>
            I
        </li>
        <li>
            Look
        </li>
        <li>
            To
        </li>
        <li>
            The
        </li>
        <li>
            Sky
        </li>
    </ul>
    <ul>
        <li>
            When
        </li>
        <li>
            I
        </li>
        <li>
            Look
        </li>
        <li>
            To
        </li>
        <li>
            The
        </li>
        <li>
            Sky
        </li>
    </ul>
    <ul>
        <li>
            When
        </li>
        <li>
            I
        </li>
        <li>
            Look
        </li>
        <li>
            To
        </li>
        <li>
            The
        </li>
        <li>
            Sky
        </li>
    </ul>
    <ul>
        <li>
            When
        </li>
        <li>
            I
        </li>
        <li>
            Look
        </li>
        <li>
            To
        </li>
        <li>
            The
        </li>
        <li>
            Sky
        </li>
    </ul>
    <ul>
        <li>
            When
        </li>
        <li>
            I
        </li>
        <li>
            Look
        </li>
        <li>
            To
        </li>
        <li>
            The
        </li>
        <li>
            Sky
        </li>
    </ul>
    <ul>
        <li>
            When
        </li>
        <li>
            I
        </li>
        <li>
            Look
        </li>
        <li>
            To
        </li>
        <li>
            The
        </li>
        <li>
            Sky
        </li>
    </ul>
    <ul>
        <li>
            When
        </li>
        <li>
            I
        </li>
        <li>
            Look
        </li>
        <li>
            To
        </li>
        <li>
            The
        </li>
        <li>
            Sky
        </li>
    </ul>
</div>

CSS:

#container {
    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    -webkit-column-fill: auto;
    -moz-column-count: 2;
    -moz-column-gap: 0;
    -moz-column-fill: auto;
    column-count: 2;
    column-gap: 0;
    column-fill: auto;
}

Thank you.

Upvotes: 0

Views: 1076

Answers (1)

cimmanon
cimmanon

Reputation: 68319

Remove the column-fill property for moz and it works as it should. Seems like a bug to me.

http://jsfiddle.net/yGyeh/2/

#container {
    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    -webkit-column-fill: auto;
    -moz-column-count: 2;
    -moz-column-gap: 0;
    /*-moz-column-fill: auto;*/
    column-count: 2;
    column-gap: 0;
    column-fill: auto;
}

Alternately, you could add an explicit height.

http://jsfiddle.net/yGyeh/3/

#container {
    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    -webkit-column-fill: auto;
    -moz-column-count: 2;
    -moz-column-gap: 0;
    -moz-column-fill: auto;
    column-count: 2;
    column-gap: 0;
    column-fill: auto;
    height: 30em;
}

Upvotes: 1

Related Questions