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

Discussion in 'HTML' started by iwasjoeking, Jun 6, 2008.

  1. iwasjoeking

    iwasjoeking Guest

    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.
     
    iwasjoeking, Jun 6, 2008
    #1
    1. Advertising

  2. iwasjoeking

    dorayme Guest

    Re: FF bug? Or IE bug? Text doesn't wrap around image in list element when image is aligned.

    In article
    <>,
    iwasjoeking <> 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
     
    dorayme, Jun 6, 2008
    #2
    1. Advertising

  3. iwasjoeking

    iwasjoeking Guest

    On Jun 6, 5:21 pm, dorayme <> wrote:
    > In article
    > <>,
    >
    >  iwasjoeking <> 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!
     
    iwasjoeking, Jun 7, 2008
    #3
  4. iwasjoeking

    viza Guest

    Hi

    On Jun 6, 5:06 pm, iwasjoeking <> 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>
     
    viza, Jun 7, 2008
    #4
  5. iwasjoeking

    dorayme Guest

    Re: FF bug? Or IE bug? Text doesn't wrap around image in list element when image is aligned.

    In article <>,
    Ben C <> wrote:

    > On 2008-06-07, viza <> wrote:
    > > Hi
    > >
    > > On Jun 6, 5:06 pm, iwasjoeking <> 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
     
    dorayme, Jun 8, 2008
    #5
  6. iwasjoeking

    Don And Sis Guest

    Re: FF bug? Or IE bug? Text doesn't wrap around image in listeleme...

    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
     
    Don And Sis, Jun 8, 2008
    #6
  7. iwasjoeking

    dorayme Guest

    Re: FF bug? Or IE bug? Text doesn't wrap around image in list element when image is aligned.

    In article <>,
    Ben C <> wrote:

    > On 2008-06-08, dorayme <> 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
     
    dorayme, Jun 8, 2008
    #7
  8. iwasjoeking

    dorayme Guest

    Re: FF bug? Or IE bug? Text doesn't wrap around image in list element when image is aligned.

    In article <>,
    Ben C <> wrote:

    > On 2008-06-08, dorayme <> 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
     
    dorayme, Jun 9, 2008
    #8
  9. 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
     
    Jonathan N. Little, Jun 10, 2008
    #9
  10. iwasjoeking

    dorayme Guest

    Re: FF bug? Or IE bug? Text doesn't wrap around image in list element when image is aligned.

    In article <>,
    Ben C <> wrote:

    > On 2008-06-09, dorayme <> wrote:
    > > In article <>,
    > > Ben C <> wrote:
    > >
    > >> On 2008-06-08, dorayme <> 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
     
    dorayme, Jun 10, 2008
    #10
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Thor W Hammer
    Replies:
    5
    Views:
    2,790
    Erik Funkenbusch
    Nov 10, 2005
  2. Todd Cary

    Text wrap around an image

    Todd Cary, May 28, 2007, in forum: HTML
    Replies:
    4
    Views:
    441
    Ben C
    May 29, 2007
  3. Aaron Fude

    To wrap or not to wrap?

    Aaron Fude, May 8, 2008, in forum: Java
    Replies:
    12
    Views:
    717
    Chronic Philharmonic
    May 10, 2008
  4. Art Werschulz

    Text::Wrap::wrap difference

    Art Werschulz, Sep 22, 2003, in forum: Perl Misc
    Replies:
    0
    Views:
    254
    Art Werschulz
    Sep 22, 2003
  5. Art Werschulz

    Text::Wrap::wrap difference

    Art Werschulz, Sep 24, 2003, in forum: Perl Misc
    Replies:
    1
    Views:
    257
    Anno Siegel
    Sep 25, 2003
Loading...

Share This Page