Firefox doesn't handle float:right in UL correctly

Hi

I got this question from a user. It stumped me, and I'm hoping for some
enlightenment from the community now. It is about centering images in a
<ul>, and right margin in subsequent <li>s after a float. Firefox
doesn't render the site as expected, while both Opera and IE does. CSS
and XHTML do validate. Please tell me if you need/prefer a minimal case.

Her case and comment:

Firefox/Mozilla will not wrap text after an image that is floated
right if the text is part of an unordered list instead of a regular
paragraph. According to all the rules, the text is suppose to wrap
under the image, and does so perfectly in IE. Here is the page:
<http://www.vroma.org/help/builder.html>

Look in the section called Editing Rooms, under Description. That
image <http://www.vroma.org/help/description.jpg> is supposed to be
centered, but it is is aligned left. Even worse is the section called
Bots. The text of list item Strings should wrap beneath the image,
but it does not. Instead there is a long blank space on the right
where nothing wraps or clears until Keywords. I have tried adding
the class .cleared {clear: both;} to various list items, to no avail.
If you look at the same page in IE it renders perfectly. I have
looked and looked and can't find any reason for this. All the CSS
books say it should work.


Thanks for any comments.

- Daniel

In article <47FAA3A9.5070503 (AT) uib (DOT) no>, Daniel Jung <jung (AT) uib (DOT) no> wrote:

Hi

I got this question from a user. It stumped me, and I'm hoping for some
enlightenment from the community now. It is about centering images in a
ul>, and right margin in subsequent <li>s after a float. Firefox
doesn't render the site as expected, while both Opera and IE does. CSS
and XHTML do validate. Please tell me if you need/prefer a minimal case.

Her case and comment:

Firefox/Mozilla will not wrap text after an image that is floated
right if the text is part of an unordered list instead of a regular
paragraph. According to all the rules, the text is suppose to wrap
under the image, and does so perfectly in IE. Here is the page:
http://www.vroma.org/help/builder.html

Look in the section called Editing Rooms, under Description. That
image <http://www.vroma.org/help/description.jpg> is supposed to be
centered, but it is is aligned left. Even worse is the section called
Bots. The text of list item Strings should wrap beneath the image,
but it does not. Instead there is a long blank space on the right
where nothing wraps or clears until Keywords. I have tried adding
the class .cleared {clear: both;} to various list items, to no avail.
If you look at the same page in IE it renders perfectly. I have
looked and looked and can't find any reason for this. All the CSS
books say it should work.


Thanks for any comments.

- Daniel

Just a quick response for now: have you tried adding to your:

ul li {
padding: 2px 0;
}

thus:

ul li {
padding: 2px 0;
width: 100%;
}

This jogs FF into flowing as you might want.

--
dorayme