Prev: popup image link requires right-click in IE
Next: Padding of 0px disables margin
From: Daniel Jung on 7 Apr 2008 18:43
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
From: dorayme on 7 Apr 2008 19:23
In article <47FAA3A9.5070503(a)uib.no>, Daniel Jung <jung(a)uib.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
 | 
Pages: 1
Prev: popup image link requires right-click in IE
Next: Padding of 0px disables margin