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?
Description:
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.
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?