FF bug? Or IE bug? Text doesn't wrap around image in list elementwhen image is aligned.

I

iwasjoeking

Does anyone know if it is possible to wrap the text contained in a
list around an image for Firefox?

In IE, it wraps the text around the image, but for Firefox, the text
of the list doesn't wrap until it reaches the next li.

Here is an example:

<style type="text/css">
<!--
#wrapper {
width: 500px;
}


-->
</style>
</head>
<body>
<div id="wrapper"><img src="http://www.google.com/logos/logo.gif"
width="276" height="110" align="left" />
<ul>
<li><p>THIS TEXT WILL WRAP IN IE, BUT NOT IN FIREFOX (until it
reaches the next li) - Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Suspendisse commodo, ante ut interdum aliquam,
tortor ante auctor justo, a lacinia metus leo sed nulla. Duis
fermentum. Suspendisse vel turpis id nunc molestie pharetra.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Curabitur scelerisque eros sed justo. Nam
neque ipsum, faucibus vitae, sagittis in, posuere sed, libero. Duis
et quam. Nullam massa. Vestibulum mollis. Proin vestibulum metus
eget
nunc. Etiam libero.</p></li>
<li><p>Nullam porta arcu in libero. Aliquam laoreet nisl. Proin
congue, justo et tempus commodo, massa orci gravida justo, tincidunt
pharetra odio quam eget odio. Nunc scelerisque fringilla lorem.
Proin
id ante. Suspendisse tincidunt convallis dui. Aenean vitae lorem
vitae enim ornare interdum. Nulla at enim. Suspendisse vitae nisl.
Suspendisse at felis. Cras dolor ante, lacinia id, consequat in,
hendrerit at, risus. Suspendisse volutpat semper dui. Quisque
commodo
magna nec elit.</p></li>
</ul>
</div>

Basically, I am trying to make FF behave like IE.


Any input would be appreciated.
 
D

dorayme

iwasjoeking said:
Does anyone know if it is possible to wrap the text contained in a
list around an image for Firefox?

In IE, it wraps the text around the image, but for Firefox, the text
of the list doesn't wrap until it reaches the next li.

Here is an example:
Click to expand...

Your example is a bit wrong in various ways. Best to use CSS floating
rather the HTML align attribute. Try this adaptation of yours:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>gaps"</title>
<style type="text/css">
#wrapper {width: 500px;}
</style>
</head>
<body>
<div id="wrapper">
<ul>
<li><p><img style="float:left"
src="http://www.google.com/logos/logo.gif"
width="276" height="110" alt=""> Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Suspendisse commodo, ante ut interdum
aliquam,tortor ante auctor justo, a lacinia metus leo sed nulla. Duis
fermentum. Suspendisse vel turpis id nunc molestie pharetra.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Curabitur scelerisque eros sed justo. Nam
neque ipsum, faucibus vitae, sagittis in, posuere sed, libero. Duis
et quam. Nullam massa. Vestibulum mollis. Proin vestibulum metus
egetnunc. Etiam libero.</p></li>
<li><p>Nullam porta arcu in libero. Aliquam laoreet nisl. Proin
congue, justo et tempus commodo, massa orci gravida justo, tincidunt
pharetra odio quam eget odio. Nunc scelerisque fringilla lorem.
Proin id ante. Suspendisse tincidunt convallis dui. Aenean vitae lorem
vitae enim ornare interdum. Nulla at enim. Suspendisse vitae nisl.
Suspendisse at felis. Cras dolor ante, lacinia id, consequat in,
hendrerit at, risus. Suspendisse volutpat semper dui. Quisque
commodo magna nec elit.</p></li>
</ul>
</div>
</body>
</html>
 
I

iwasjoeking

Your example is a bit wrong in various ways. Best to use CSS floating
rather the HTML align attribute. Try this adaptation of yours:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>gaps"</title>
<style type="text/css">
#wrapper {width: 500px;}
</style>
</head>
<body>
<div id="wrapper">
  <ul>
    <li><p><img style="float:left"
src="http://www.google.com/logos/logo.gif"
width="276" height="110" alt=""> Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Suspendisse  commodo, ante ut interdum
aliquam,tortor ante auctor justo, a lacinia  metus leo sed nulla. Duis
fermentum. Suspendisse vel turpis id nunc  molestie pharetra.
Vestibulum ante ipsum primis in faucibus orci luctus  et ultrices
posuere cubilia Curae; Curabitur scelerisque eros sed  justo. Nam
neque ipsum, faucibus vitae, sagittis in, posuere sed,  libero. Duis
et quam. Nullam massa. Vestibulum mollis. Proin vestibulum  metus
egetnunc. Etiam libero.</p></li>
    <li><p>Nullam porta arcu in libero. Aliquam laoreet nisl. Proin
congue,  justo et tempus commodo, massa orci gravida justo, tincidunt
pharetra  odio quam eget odio. Nunc scelerisque fringilla lorem.
Proin id ante.  Suspendisse tincidunt convallis dui. Aenean vitae lorem
vitae enim  ornare interdum. Nulla at enim. Suspendisse vitae nisl.
Suspendisse at  felis. Cras dolor ante, lacinia id, consequat in,
hendrerit at, risus.  Suspendisse volutpat semper dui. Quisque
commodo magna nec elit.</p></li>
 </ul>
</div>
 </body>
</html>
Click to expand...




That worked. Thanks dorayme!
 
V

viza

Hi

Does anyone know if it is possible to wrap the text contained in a
list around an image for Firefox?

In IE, it wraps the text around the image, but for Firefox, the text
of the list doesn't wrap until it reaches the next li.

Here is an example:
[snip]
Click to expand...

The CSS specification is ambiguous about how lists are supposed to be
laid-out, so browsers developers make up their own rules about what to
do, and they tend to differ. I'm still not convinced that Gecko
(Mozilla layout engine) is even complying with the spec, but I've got
bored of trying to work out if it is allowed to do what it does.

Anyway, this is how you do what you want: (I haven't fixed the million
other things that are wrong with your code, but as is the way on
Usenet, I'm sure you will get ten nitpicking replies to every useful
one).


<style type="text/css">
<!--
#wrapper {
width: 500px;

}

-->
</style>
</head>
<body>
<div id="wrapper">
<ul>
<li><p><img src="http://www.google.com/logos/logo.gif"
width="276" height="110" align="left" />THIS TEXT WILL WRAP IN IE,
BUT NOT IN FIREFOX (until it
reaches the next li) - Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Suspendisse commodo, ante ut interdum aliquam,
tortor ante auctor justo, a lacinia metus leo sed nulla. Duis
fermentum. Suspendisse vel turpis id nunc molestie pharetra.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Curabitur scelerisque eros sed justo. Nam
neque ipsum, faucibus vitae, sagittis in, posuere sed, libero. Duis
et quam. Nullam massa. Vestibulum mollis. Proin vestibulum metus
eget
nunc. Etiam libero.</p></li>
<li><p>Nullam porta arcu in libero. Aliquam laoreet nisl. Proin
congue, justo et tempus commodo, massa orci gravida justo, tincidunt
pharetra odio quam eget odio. Nunc scelerisque fringilla lorem.
Proin
id ante. Suspendisse tincidunt convallis dui. Aenean vitae lorem
vitae enim ornare interdum. Nulla at enim. Suspendisse vitae nisl.
Suspendisse at felis. Cras dolor ante, lacinia id, consequat in,
hendrerit at, risus. Suspendisse volutpat semper dui. Quisque
commodo
magna nec elit.</p></li>
</ul>
</div>
 
D

dorayme

Ben C said:
Hi

Does anyone know if it is possible to wrap the text contained in a
list around an image for Firefox?

In IE, it wraps the text around the image, but for Firefox, the text
of the list doesn't wrap until it reaches the next li.

Here is an example:
[snip]
Click to expand...

The CSS specification is ambiguous about how lists are supposed to be
laid-out, so browsers developers make up their own rules about what to
do, and they tend to differ. I'm still not convinced that Gecko
(Mozilla layout engine) is even complying with the spec, but I've got
bored of trying to work out if it is allowed to do what it does.
Click to expand...

It's not complying. The spec doesn't say exactly where the bullet goes,
but apart from that, a LI should behave pretty much like a DIV-- i.e.
it's just a block box plus a bullet somewhere nearby.

This means the left edge of the LI should be right over at the left of
its container, regardless of the float. But the text inside the LI
should be pushed to the right of the float, as text usually is.

Read literally, the spec says the bullet should be over on the left,
behind the floated image because it is supposed to be outside the LI's
"principal block box". Many browsers try to put it somewhere more
helpful, like just to the right of the image.

But Firefox 2 moves the whole LI to the right of the float as if it were
a block formatting context, which it isn't. I assume they do that as a
solution to the problem of the bullet getting hidden behind the image.
Click to expand...

In the markup I gave the OP, FF 2.0.0.14 behaved as with all the other
browsers including Mac IE and put the bullet on far left. The only
exception on my Mac browsers was Opera 9.24
 
D

Don And Sis

Try This
<img style="float:left"
src="http://www.google.com/logos/logo.gif" width="276" height="110"
alt="align="left">



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html>
<img style="float:left"
src="http://www.google.com/logos/logo.gif" width="276" height="110"
alt="align="left"> Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Suspendisse commodo, ante ut interdum aliquam,tortor ante auctor
justo, a lacinia metus leo sed nulla. Duis fermentum. Suspendisse vel
turpis id nunc molestie pharetra. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur
scelerisque eros sed justo. Nam neque ipsum, faucibus vitae, sagittis
in, posuere sed, libero. Duis et quam. Nullam massa. Vestibulum mollis.
Proin vestibulum metus egetnunc. Etiam libero.</p></li>
        <li><p>Nullam porta arcu in libero. Aliquam
laoreet nisl. Proin congue, justo et tempus commodo, massa orci gravida
justo, tincidunt pharetra odio quam eget odio. Nunc scelerisque
fringilla lorem. Proin id ante. Suspendisse tincidunt convallis dui.
Aenean vitae lorem vitae enim ornare interdum. Nulla at enim.
Suspendisse vitae nisl. Suspendisse at felis. Cras dolor ante, lacinia
id, consequat in, hendrerit at, risus. Suspendisse volutpat semper dui.
Quisque commodo magna nec elit.</p></li>
  </ul>
</div>
  </body>
</html>


Don
 
D

dorayme

Ben C said:
That's because you moved the image so it was inside the LI.
Click to expand...

I offered my markup as a practical solution to OP's problem (I used most
of his mark up for speed) but I might have been too quick in supposing
Opera was the odd man out on my mark-up. Because now I am clearly seeing
FF as the odd one out! All my Mac browsers *except FF and MacIE* are
showing

<http://dorayme.890m.com/alt/float_in_list_item.html>

with the first bullet on the right of the Google image! FF and MacIE
seem more reasonable to me, the image is part of the list item in this
mark up.

But I do accept that you and another poster are talking about another
interesting and slightly different matter which was not addressed by me.

Will it always be like this, browsers not agreeing? Perhaps we should
all get out of the way and let the browsers themselves talk to each
other and sort things out? They should have their own newsgroup already!
I wonder if any browsers will be accused of being disgusting cowards or
dipsticks? Will IE 6 be picked on? <g>
 
D

dorayme

Ben C said:
The spec says the bullet goes where the browser feels like putting it,
but it does say it should be outside the LI's block box. Opera is
putting it inside the block box. But one can see why.
Click to expand...

We should be concerned that browsers are given such independence! Unlike
with humans and animals, lets be against their emancipation.

Take a look at:

<http://dorayme.890m.com/alt/floats_list_style_position.html>

In both list items shown (separate ULs but this is not important) most
browsers simply do what is against common sense, the image should but is
not a part of the (bullet)point.

However, and this is my motivation to show you this, you can see how
keen FF is to keep its common sense and have the image within the
(bullet)point. It runs into abnormal trouble with the second list item
and has to solve whatever is causing its indecision (its lack of
guidance from the specs) by dropping it under the first line of text but
still - valiantly - within the point. Good try and better than all the
other browsers (except, so oddly enough, the not much used MacIE5, which
also shows the same common sense here)
 
D

dorayme

Ben C said:
Yes, and that is what the spec says it should do: the bullet is supposed
to outside the box you've put a dotted border on, and in Firefox it is.


I think this is just a manifestation of a different Firefox bug we have
discussed before: floats if preceded by _any_ inline content always go
on the next line in Firefox. They should only go on the next line if
putting them on the same line causes the line to break such that an
inline box preceding the float ends up lower than its top edge.

It looks like the list-style-position: inside bullet is treated as an
inline box prepended to the li's contents, i.e. it goes in _before the
float_, and so exercises this bug.
Click to expand...

Yes, it does look like that. And we have discussed the general phenomena
before. Keeping in mind what you are saying below (which is all
correct), if one changes the list and ul to a simple p, one can see how
FF differs from other browsers. I have added a reference to this in an
addition to:
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

repeat-y doesn't work in IE but works fine on other browsers help please 0
[CSS] IE Bug : heigth &margin-right & float incompatible 1
How to detect iframe doc change and loading 0
a test posting 0
z-index? Wrapping text and positioning 7
a test posting 0
Simple Block Centering in IE 10
a test posting 0

Members online

No members online now.
Total: 32 (members: 0, guests: 32)
Robots: 325

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,009
Latest member
GidgetGamb

Latest Threads

Top