List breaks within nested columns in FireFox

I think I found a #Firefox bug. Bug 822053 “list breaks within nested columns”

The layout works fine in Safari. Can anyone suggest a work-around to get it working in FireFox?

I have a CSS3 2-column div within a box div that is nested within a CSS3 2-column div. The nested-column contains a ul list. The list is breaking within the nested column.

I pasted the 2-column box-with-list outside of the containing 2-column div. It works outside of the first 2-column containing div.

I have created an example here:

The example of what a working box looks like is to the left. The broken nested 2-column box with list is to the right.

The example on the left is what I’m aiming for. I need the 2-column elements to revert to 1-column using media queries at smaller sizes. This works fine in Safari 5.0.6.

Please let me know if this bug exists in newer versions of Firefox. Mine is 16.0.2 and please also alert me to a work-around or patch-fix. Thanks!

Interesting problem! The same thing happens in FF 17.0.1. I’m not sure how soon browsers are expected to be able to support this stuff properly, but I give them leeway given that CSS3 is still being developed.

Obviously, a workaround would be to use JavaScript until this aspect of CSS3 is fully ready for real world usage.

Hi Ralph, Thank you for the reply. I suspected that would be the course to take. My JavaScript is weak. I only know a little. I need help to know what strategy using JavaScript to start with. If I were to guess, I’d want JavaScript to do the math FireFox seems to be missing, like SASS seems to promise for CSS.

Then I would need to target FireFox. Really I’m clueless. Any suggestions?

I was really just suggesting using JS instead of CSS3 for all browsers at this stage. (Then you pick up the older browsers, too.)

Here are three JS links I have bookmarked:

Not sure how they’d go with the nested column either, but I guess if they have any troubles, you could use JS for on and CSS3 for the other.