Really basic float right problem cross browser

Discussion in 'HTML' started by Ciaran, Sep 23, 2009.

  1. Ciaran

    Ciaran Guest

    I've come across this small annoying problem many times but never
    managed to figure out a satisfactory solution.
    It's incredibly simple: an element that is floated right which has
    inline content in before it looks different in every browser.

    In the past, all browsers rendered the floated element down a line
    which meant a negative margin-top would fix the problem but the latest
    version of firefox and chrome (correctly) display the floated content
    on the same line as the rest of the inline stuff.

    I've found one workaround: putting the floated element before the
    inline content correctly renders it in the right spot but I'd prefer
    to keep the HTML clean and fix this with CSS. Any Ideas?

    Look at this in FF and then IE and you'll see what I mean:

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
    www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head></head>
    <body>
    Some inline content<div style="float:right">floated right!</div>
    </body>
    </html>
     
    Ciaran, Sep 23, 2009
    #1
    1. Advertising

  2. Ciaran

    dorayme Guest

    In article
    <>,
    Ciaran <> wrote:

    > I've come across this small annoying problem many times but never
    > managed to figure out a satisfactory solution.
    > It's incredibly simple: an element that is floated right which has
    > inline content in before it looks different in every browser.
    >
    > In the past, all browsers rendered the floated element down a line
    > which meant a negative margin-top would fix the problem but the latest
    > version of firefox and chrome (correctly) display the floated content
    > on the same line as the rest of the inline stuff.
    >
    > I've found one workaround: putting the floated element before the
    > inline content correctly renders it in the right spot but I'd prefer
    > to keep the HTML clean and fix this with CSS. Any Ideas?
    >
    > Look at this in FF and then IE and you'll see what I mean:
    >
    > DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
    > www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > <html>
    > <head></head>
    > <body>
    > Some inline content<div style="float:right">floated right!</div>
    > </body>
    > </html>


    Why would you be using transitional as a doctype? What are you
    transitioning from, as a well known regular around here likes to say?

    Anyway, all of my Mac browsers show the same. But this does reveal an
    unexpected bug in my FF 3.5.3 (and possibly independent of this problem
    you are seeing), namely that the right float disappears completely at
    narrow browser window sizes! It is perhaps connected to that even the
    inline text will not wrap at narrow browser sizing. Curious indeed.

    FF has always been a bit funny in the past its engagement with the float
    rules.

    The more logical way to do your above is to

    <div>
    <div style="float:right">floated right!</div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque
    augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis
    nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam
    posuere vehicula. Pellentesque habitantmorbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Maecenas justonunc, porta sed,
    molestie eget, adipiscing id, ante. Cum sociis natoque penatibus
    etmagnis dis parturient montes, nascetur ridiculus mus. Suspendisse
    potenti. Nunc blanditmagna id odio sodales luctus. Nulla quam magna,
    viverra quis, dignissim blandit, viverra nec, odio.
    </div>

    or


    <div style="float:right">floated right!</div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec
    orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae
    quam posuere vehicula. Pellentesque habitantmorbi tristique senectus et
    netus et malesuada fames ac turpis egestas. Maecenas justonunc, porta
    sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus
    etmagnis dis parturient montes, nascetur ridiculus mus. Suspendisse
    potenti. Nunc blanditmagna id odio sodales luctus. Nulla quam magna,
    viverra quis, dignissim blandit, viverra nec, odio.</p>


    This gets the general case for when the normal text (which btw in HTML
    4.01 should not be bare in BODY but wrapped in a block element) is
    longer but you want that the float is at the top. The text wrapping and
    wrapping around the float; if you don't want the very latter, give a
    right margin to the inline wrap (paragraph in the last example), even a
    width to suit.

    --
    dorayme
     
    dorayme, Sep 23, 2009
    #2
    1. Advertising

  3. Ciaran

    Neredbojias Guest

    On 22 Sep 2009, Ciaran <> wrote:

    > I've come across this small annoying problem many times but never
    > managed to figure out a satisfactory solution.
    > It's incredibly simple: an element that is floated right which has
    > inline content in before it looks different in every browser.
    >
    > In the past, all browsers rendered the floated element down a line
    > which meant a negative margin-top would fix the problem but the
    > latest version of firefox and chrome (correctly) display the floated
    > content on the same line as the rest of the inline stuff.
    >
    > I've found one workaround: putting the floated element before the
    > inline content correctly renders it in the right spot but I'd prefer
    > to keep the HTML clean and fix this with CSS. Any Ideas?
    >
    > Look at this in FF and then IE and you'll see what I mean:
    >
    > DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
    > www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > <html>
    > <head></head>
    > <body>
    > Some inline content<div style="float:right">floated right!</div>
    > </body>
    > </html>


    Well, for one thing that's invalid markup so it might not be so
    surprising that it renders differently in different browsers. Inline
    content cannot be contained in the <body> "naked"; it must be nested in
    a block element.

    --
    Neredbojias
    http://www.neredbojias.org/
    http://www.neredbojias.net/
     
    Neredbojias, Sep 23, 2009
    #3
  4. Ciaran

    cronoklee Guest

    >Why would you be using transitional as a doctype? What are you
    >transitioning from, as a well known regular around here likes to say?


    The doctype makes no difference as fa as I can tell. Strict and
    Transitional produce the same problem. See example below



    >The more logical way to do your above is to
    ><div style="float:right">floated right!</div>
    ><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>...



    Yes I mentioned placing the float before the inline my post but I'd
    prefer a CSS solution. Floated right content should appear beneath
    main content when CSS is off.


    >Well, for one thing that's invalid markup so it might not be so
    >surprising that it renders differently in different browsers. Inline
    >content cannot be contained in the <body> "naked"; it must be nested in
    >a block element.


    OK well imagine I originally posted this then:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    TR/html4/strict.dtd"><html>
    <head>
    <title>test</title>
    </head>
    <body>
    <span>Some inline content<span><div style="float:right">floated right!
    </div>
    </body>
    </html>


    The latest FF and Chrome on PC render the float at the top of the page
    while IE8 and almost all older browsers render it down a line.

    Any ideas what's going on here?

    Ciarán
     
    cronoklee, Sep 23, 2009
    #4
  5. Ciaran

    dorayme Guest

    In article
    <>,
    cronoklee <> wrote:

    > >Why would you be using transitional as a doctype? What are you
    > >transitioning from, as a well known regular around here likes to say?

    >
    > The doctype makes no difference as fa as I can tell. Strict and
    > Transitional produce the same problem. See example below
    >

    Lets agree that we all should use a good doctype declaration and be
    daring and say it is 4.01 Strict for the moment.
    >
    > >The more logical way to do your above is to
    > ><div style="float:right">floated right!</div>
    > ><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>...

    >
    >
    > Yes I mentioned placing the float before the inline my post but I'd
    > prefer a CSS solution. Floated right content should appear beneath
    > main content when CSS is off.
    >


    As mentioned, if you put the floated element to the right of mere inline
    content and the latter is lots that wrap to a few lines, you might not
    get the float appearing quite where you want it in vertical space. Let's
    see below...


    >
    > >Well, for one thing that's invalid markup so it might not be so
    > >surprising that it renders differently in different browsers. Inline
    > >content cannot be contained in the <body> "naked"; it must be nested in
    > >a block element.

    >


    > OK well imagine I originally posted this then:
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    > TR/html4/strict.dtd"><html>
    > <head>
    > <title>test</title>
    > </head>
    > <body>
    > <span>Some inline content<span><div style="float:right">floated right!
    > </div>
    > </body>
    > </html>
    >


    Let's close your SPAN. But even so, this does not get over the point you
    are responding to because SPAN itself is an inline element.

    I would be rid of span and use a paragraph element. But, for the point I
    make now, it will make no difference, either! If you style the P or the
    SPAN with style="float: left;", you should see what you want to see in
    the recalcitrant browsers and have the right float text appear under the
    left if CSS is off.

    Is this a "CSS solution" that you wanted?

    Why is there such a difference in browsers in your original case? Ask
    Microsoft, they produced buggy browsers because they were careless and
    too much on their minds at the time. Getting them to reasonable
    standards has been a bit like getting North Korea to give up nuclear
    weapon capability.

    >
    > The latest FF and Chrome on PC render the float at the top of the page
    > while IE8 and almost all older browsers render it down a line.
    >
    > Any ideas what's going on here?
    >


    --
    dorayme
     
    dorayme, Sep 24, 2009
    #5
  6. Ciaran

    cronoklee Guest

    On Sep 24, 12:09 am, dorayme <> wrote:
    > In article
    > <>,
    >
    >  cronoklee <> wrote:
    > > >Why would you be using transitional as a doctype? What are you
    > > >transitioning from, as a well known regular around here likes to say?

    >
    > > The doctype makes no difference as fa as I can tell. Strict and
    > > Transitional produce the same problem. See example below

    >
    > Lets agree that we all should use a good doctype declaration and be
    > daring and say it is 4.01 Strict for the moment.
    >
    >
    >
    > > >The more logical way to do your above is to
    > > ><div style="float:right">floated right!</div>
    > > ><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>...

    >
    > > Yes I mentioned placing the float before the inline my post but I'd
    > > prefer a CSS solution. Floated right content should appear beneath
    > > main content when CSS is off.

    >
    > As mentioned, if you put the floated element to the right of mere inline
    > content and the latter is lots that wrap to a few lines, you might not
    > get the float appearing quite where you want it in vertical space. Let's
    > see below...
    >
    >
    >
    >
    >
    > > >Well, for one thing that's invalid markup so it might not be so
    > > >surprising that it renders differently in different browsers.  Inline
    > > >content cannot be contained in the <body> "naked"; it must be nested in
    > > >a block element.

    >
    > > OK well imagine I originally posted this then:
    > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    > > TR/html4/strict.dtd"><html>
    > > <head>
    > > <title>test</title>
    > > </head>
    > > <body>
    > > <span>Some inline content<span><div style="float:right">floated right!
    > > </div>
    > > </body>
    > > </html>

    >
    > Let's close your SPAN. But even so, this does not get over the point you
    > are responding to because SPAN itself is an inline element.
    >
    > I would be rid of span and use a paragraph element. But, for the point I
    > make now, it will make no difference, either! If you style the P or the
    > SPAN with style="float: left;", you should see what you want to see in
    > the recalcitrant browsers and have the right float text appear under the
    > left if CSS is off.
    >
    > Is this a "CSS solution" that you wanted?
    >
    > Why is there such a difference in browsers in your original case? Ask
    > Microsoft, they produced buggy browsers because they were careless and
    > too much on their minds at the time. Getting them to reasonable
    > standards has been a bit like getting North Korea to give up nuclear
    > weapon capability.
    >
    >
    >
    > > The latest FF and Chrome on PC render the float at the top of the page
    > > while IE8 and almost all older browsers render it down a line.

    >
    > > Any ideas what's going on here?

    >
    > --
    > dorayme




    Yes looks good dorayme - The float-left will do the job it seems. The
    only problem with this method is that with all the content of parent
    element floated, it's height will be 0. In the past I've used a <hr
    style="clear:both; visibility:hidden" /> as a workaround for fluid
    height elements with floated children. It's not ideal to add extra
    markup but it seems to be the best solution. Hopefully IE9 will fall
    in line with the latest standards for rendering floats. Fingers
    crossed but I'm not holding my breath!

    Thanks for the help,
    Ciarán
     
    cronoklee, Sep 25, 2009
    #6
  7. Ciaran

    BootNic Guest

    On Tue, 22 Sep 2009 18:27:55 -0700 (PDT)
    Ciaran <> wrote:

    [snip]

    > In the past, all browsers rendered the floated element down a
    > line which meant a negative margin-top would fix the problem but
    > the latest version of firefox and chrome (correctly) display the
    > floated content on the same line as the rest of the inline stuff.


    [snip]

    > Look at this in FF and then IE and you'll see what I mean:


    [snip]

    IE 8 has the ability to display the content in a similar manner as
    other current browsers. Compatibility view setting in IE 8 may affect
    how IE 8 displays a site.

    • The user may choose to display all intranet sites/websites
    in compatibility view and or use a list of websites to
    display in compatibility view.

    • The sever may send a X-UA-Compatible header which will also
    change the view in IE 8.

    • The author may include and X-UA-Compatible meta tag



    --
    BootNic Thu Sep 24, 2009 10:23 pm
    It's not that some people have willpower and some don't. It's that
    some people are ready to change and others are not.
    *James Gordon*

    â• 291 days remaining

    -----BEGIN PGP SIGNATURE-----
    Version: GnuPG v2.0.12 (GNU/Linux)

    iEYEARECAAYFAkq8KaQACgkQmo2774GZ7qlmeACgtt2p6fJHS9G+yBV+4oTv6ZGc
    0PgAnAvLmIVQX+0DIZbZ3rGtjzFIFANr
    =JMgT
    -----END PGP SIGNATURE-----
     
    BootNic, Sep 25, 2009
    #7
  8. Ciaran

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2009-09-23, dorayme <> wrote:
    > > In article
    > ><>,
    > > cronoklee <> wrote:

    ....
    > > Why is there such a difference in browsers in your original case? Ask
    > > Microsoft, they produced buggy browsers because they were careless and
    > > too much on their minds at the time. Getting them to reasonable
    > > standards has been a bit like getting North Korea to give up nuclear
    > > weapon capability.

    >
    > This was actually a bug-in-common between Firefox and IE. I think the
    > correct CSS rules are unnecessarily silly in this case and the spec
    > should have been changed to what FF and IE were doing.
    >
    > But rules are rules. Opera and Konqueror and the most recent FF get it
    > right.


    I was looking in browsershots at some things on floats about order of
    floats and different browsers recently and it seems most modern browsers
    are 'following the rules'. I went into this a bit at:

    <http://netweaver.com.au/floatHouse/page5.php>

    and notice even IE7 getting it wrong. But FF is now caught up as you
    say... Also IE8. Looks like I need to spring clean all that stuff and
    the appendices with the screenshots to bring it up to date...

    It was such a worry a while back the different float treatments across
    browsers, enough to drive an author into absolute rag... positioning
    which seems a bit more consistent across browsers.

    --
    dorayme
     
    dorayme, Sep 28, 2009
    #8
  9. Ciaran

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > I think the
    > correct CSS rules are unnecessarily silly in this case and the spec
    > should have been changed to what FF and IE were doing.


    Come to think of it some more, I am interested in why you say this. In
    respect to what sort of case?

    My older Camino (Gecko) is the only browser I have now on my Mac that
    does what (I think) you think is more sensible for the fourth instance:

    <http://dorayme.netweaver.com.au/justPics/floatorderinolderbrowser.png>

    for

    <http://dorayme.netweaver.com.au/float_order.html>

    --
    dorayme
     
    dorayme, Sep 28, 2009
    #9
  10. Ciaran

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2009-09-28, dorayme <> wrote:
    > > In article <>,
    > > Ben C <> wrote:
    > >
    > >> I think the
    > >> correct CSS rules are unnecessarily silly in this case and the spec
    > >> should have been changed to what FF and IE were doing.

    > >
    > > Come to think of it some more, I am interested in why you say this. In
    > > respect to what sort of case?

    >
    > When the line breaks before the float.
    >
    > Suppose you've got this:
    >
    > <div>
    > Here is some text <span>float</span>
    > </div>
    >
    > We should see the float on the left and the word "Here" to the right of
    > it, aligned with the top of the float. (The span is floated left).
    >
    > So far so good, but if the line breaks before the word "text" because
    > the container is narrow, then everything changes, and we get the line of
    > text first and the float below it.
    >
    > This just seems a bit unintuitive to me. Or maybe I'm just being grouchy
    > because I'm going to have to fix this in the browser my day job is
    > working on.


    I'm still puzzled because this is so unrealistic a case and I am trying
    to get a handle on what a realistic case would be and why you find it
    unintuitive?

    <div>
    Here is some text and let's make the sentence longer so we can narrow
    .... <img style="float: left; padding: .2em;" src="pics/crimson.png"
    alt="">
    </div>

    First point to note is that in my older Camino, the only quickly
    available browser I have that does it different to modern Safari, FF
    etc, is that when the browser is not narrowed, a rather unintuitive
    result happens, the float is on the next line to the text? Or am I too
    used to the modern effect?

    Second, when the browser is narrowed, you lose the effect of wrapping
    text around the float, carefully placing the float among the text. I
    have been thinking this as some sort of common raison d'être for floats.

    Anyway, what is important is consistency and from the author's point of
    view, a carefully placed floated image in text seems to me to be a more
    daunting task with the older browser way.

    Perhaps we are thinking different cases?

    --
    dorayme
     
    dorayme, Sep 30, 2009
    #10
  11. [OT - Re: Really basic float right problem cross browser]

    On Sep 23, 6:43 am, dorayme <> wrote:

    > Anyway, all of my Mac browsers show the same.


    fyi: www.google.com/mac/
     
    Jan C. Faerber, Oct 1, 2009
    #11
  12. Ciaran

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2009-09-30, dorayme <> wrote:

    ....
    > >
    > > First point to note is that in my older Camino, the only quickly
    > > available browser I have that does it different to modern Safari, FF
    > > etc, is that when the browser is not narrowed, a rather unintuitive
    > > result happens, the float is on the next line to the text? Or am I too
    > > used to the modern effect?

    >
    > No, that is a bit unintuitive I guess.
    >
    > What I suggest may be unintuitive is when you are expecting the modern
    > effect, but then the line breaks, and then suddenly you get the float on
    > the next line after all, with the word that is before it in the source
    > above it.
    >
    > At least the ancient effect was more predictable.
    >

    If you look at all the differences between the way:

    <http://dorayme.netweaver.com.au/alt/floatWays.html>

    behaves in older browsers like Camino 1.5 and FF 3.5, we agree that the
    image *never* being on the first line no matter how much room there is,
    is simply 'not good'. They are supposed to go to the left if there is
    room. In Camino and perhaps older FF they don't.

    As for what is intuitive and what is not otherwise, it is a bit hard to
    say. In one sense, nothing is all that intuitive about floats! One
    wrestles with predictability too. When one narrows the browser to get a
    goodly bit of wrap going, the old and new browsers are more equivalent.
    The big difference, at least the one that stands out to me and is
    probably of more practical importance is the difference in the context
    of plenty of browser width.

    --
    dorayme
     
    dorayme, Oct 8, 2009
    #12
    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. bd
    Replies:
    0
    Views:
    651
  2. =?Utf-8?B?TFc=?=
    Replies:
    8
    Views:
    435
    =?Utf-8?B?TFc=?=
    Apr 25, 2007
  3. David Schwartz

    cross-browser right sidebar

    David Schwartz, Jun 20, 2008, in forum: HTML
    Replies:
    9
    Views:
    509
    David Schwartz
    Jun 24, 2008
  4. Carsten Fuchs
    Replies:
    45
    Views:
    1,610
    James Kanze
    Oct 8, 2009
  5. LW
    Replies:
    1
    Views:
    183
    Alexey Smirnov
    May 2, 2007
Loading...

Share This Page