SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

    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.

    I have created an example here: http://www.craigwebbart.com/ga/bugzilla.htm

    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!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Interesting problem! The same thing happens in FF 17.0.1. 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?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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:

    http://code.google.com/p/js-columns/
    http://www.systemantics.net/en/other/columnize
    http://welcome.totheinter.net/columnizer-jquery-plugin/

    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •