A “list items won’t wrap” Firefox css fix!

Published on by zippy

The last few days working on the openmoney.info website, I’ve had a major hassle dealing with what appears to be a bug in the html renderer in Firefox.

The issue is that in Firefox, text in a list item won’t wrap around a right floated image; like this:

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  2. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Code:

<ol style="border: 1px solid #cccccc; width: 300px">
  <img src="/images/eric.png" style="float: right" />
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</li>
  <li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
  ut aliquip ex ea commodo consequat.</li>
</ol>

In Safari & Opera the text in the second list item wraps just fine. After an hour of searching the web and trying various things with clear, and in-line, I discovered that the solution was to set the list item width to 100%. In other words, list items take on the width that they start at by default! Crazy. The solution:

<ol style="border: 1px solid #cccccc; width: 300px">
  <img src="/images/eric.png" style="float: right" />
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</li>
  <li style="width:100%">sed do eiusmod tempor incididunt ut labore et
  dolore magna aliqua.  Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ol>

yields nice wrapping text for the second list item:

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  2. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

If you aren’t viewing this on Firefox, the above two may look identical. That’s the whole point!

[tags]css,firefox,list item,wrap[/tags]

2 thoughts on “A “list items won’t wrap” Firefox css fix!”

  1. timepiece
    October 26, 2007

    Hmmm. I was looking for a solution to a similar problem that I am having (although my image is floated to the left). Your solution didn’t work for me.

    My situation is further complicated in that the HTML in the problem section is generated by an off-site javascript, so the CSS has to be in the linked style sheet, not applied to the item in the HTML (that section does have its own classes, so it’s not hard to manage). Any suggestions? The page in question is here.

    Looking at your code again, I see your image is inside your list tags. My image is immediately before my opening list tag, again, because of the javascript. Is that why this solution failed, you think?

    Reply
  2. eric
    October 26, 2007

    Hey timepiece!

    Sorry to say I’m not sure why it fails on that float left. I did notice that if you set rss-item class to be marign-left: -50px it starts to wrap, but that messes up the next rss item. Very screwey.

    Reply

Leave a Reply