Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > FF bug? Or IE bug? Text doesn't wrap around image in list elementwhen image is aligned.

Reply
Thread Tools

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

 
 
iwasjoeking
Guest
Posts: n/a
 
      06-06-2008
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.

 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      06-06-2008
In article
<(E-Mail Removed)>,
iwasjoeking <(E-Mail Removed)> wrote:

> 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:


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>

--
dorayme
 
Reply With Quote
 
 
 
 
iwasjoeking
Guest
Posts: n/a
 
      06-07-2008
On Jun 6, 5:21*pm, dorayme <(E-Mail Removed)> wrote:
> In article
> <(E-Mail Removed)>,
>
> *iwasjoeking <(E-Mail Removed)> wrote:
> > 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:

>
> 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>
>
> --
> dorayme





That worked. Thanks dorayme!
 
Reply With Quote
 
viza
Guest
Posts: n/a
 
      06-07-2008
Hi

On Jun 6, 5:06 pm, iwasjoeking <(E-Mail Removed)> wrote:
> 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]


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>
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      06-08-2008
In article <(E-Mail Removed)>,
Ben C <(E-Mail Removed)> wrote:

> On 2008-06-07, viza <(E-Mail Removed)> wrote:
> > Hi
> >
> > On Jun 6, 5:06 pm, iwasjoeking <(E-Mail Removed)> wrote:
> >> 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]

> >
> > 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.

>
> 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.


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

--
dorayme
 
Reply With Quote
 
Don And Sis
Guest
Posts: n/a
 
      06-08-2008
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

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      06-08-2008
In article <(E-Mail Removed)>,
Ben C <(E-Mail Removed)> wrote:

> On 2008-06-08, dorayme <(E-Mail Removed)> wrote:


> > 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.

>
> That's because you moved the image so it was inside the LI.
>


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>

--
dorayme
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      06-09-2008
In article <(E-Mail Removed)>,
Ben C <(E-Mail Removed)> wrote:

> On 2008-06-08, dorayme <(E-Mail Removed)> wrote:


> > 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.

>
> 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.
>


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)

--
dorayme
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      06-09-2008
Ben C wrote:

> The Firefox bug is shared by IE7, but not by Opera.


FWIW bug is fixed in FireFox3 which is soon to be released.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      06-09-2008
In article <(E-Mail Removed)>,
Ben C <(E-Mail Removed)> wrote:

> On 2008-06-09, dorayme <(E-Mail Removed)> wrote:
> > In article <(E-Mail Removed)>,
> > Ben C <(E-Mail Removed)> wrote:
> >
> >> On 2008-06-08, dorayme <(E-Mail Removed)> wrote:

> >
> >> > 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.
> >>
> >> 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.
> >>

> >
> > 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.

>
> 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.
>
> > 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.

>
> 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.


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:

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

>
> You can see what I mean if you set list-style-type: none first of all.
> Now the floating image is aligned to the top of the first line because
> the float is very first thing. Now insert a little bit of text before
> the <img> in the source, just a couple of characters. Suddenly the image
> is now aligned to the top of the second line (in Firefox, and this is
> the bug). The inside bullet is having the same effect as the bit of
> text.
>
> The Firefox bug is shared by IE7, but not by Opera.


--
dorayme
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
To wrap or not to wrap? Aaron Fude Java 12 05-10-2008 06:33 PM
Text wrap around an image Todd Cary HTML 4 05-29-2007 06:54 AM
Wrap computer components in bubble wrap? Ickshka Computer Support 7 05-05-2006 05:54 PM
Text::Wrap::wrap difference Art Werschulz Perl Misc 1 09-25-2003 06:15 PM
Text::Wrap::wrap difference Art Werschulz Perl Misc 0 09-22-2003 02:36 PM



Advertisments