nestscape respecting floats

Discussion in 'HTML' started by Shawn Modersohn, Apr 26, 2004.

  1. IE 6 displays this the way I want. Netscape7 doesn't seem to care that the
    paragraph is floated to the left. Its as though it is positioned relative
    to the window rather than the floated paragraph. It's my understanding that
    by specifying position:relative, the container will appear as it normally
    would in the flow of content. Basically, is this behaivor one of those
    inherent inconsistencies or is my form bad? I assume IE is getting this
    right and Nestscape wrong.

    <body>
    <p style="float:left;">here is a bunch of stuff, lets see where it goes</p>
    <div id="Layer1" style="position:relative; border: 1px solid; left:80px;
    top:0px; width:199px; height:480px; z-index:1"></div>
    <div id="Layer2" style="position:relative; border: 1px solid; left:0px;
    top:0px; width:520px; height:480px; z-index:2"></div>
    </body>
     
    Shawn Modersohn, Apr 26, 2004
    #1
    1. Advertising

  2. Shawn Modersohn

    Steve Pugh Guest

    "Shawn Modersohn" <> wrote:

    >IE 6 displays this the way I want. Netscape7 doesn't seem to care that the
    >paragraph is floated to the left. Its as though it is positioned relative
    >to the window rather than the floated paragraph. It's my understanding that
    >by specifying position:relative, the container will appear as it normally
    >would in the flow of content. Basically, is this behaivor one of those
    >inherent inconsistencies or is my form bad? I assume IE is getting this
    >right and Nestscape wrong.


    Always a dangerous assumption.

    ><p style="float:left;">here is a bunch of stuff, lets see where it goes</p>
    ><div id="Layer1" style="position:relative; border: 1px solid; left:80px;
    >top:0px; width:199px; height:480px; z-index:1"></div>


    Imagine this without any positioning.

    <p style="float:left;">here is a bunch of stuff, lets see where it
    goes</p>
    <div style="border: 1px solid; width:199px; height:480px;"></div>

    Where does the div go?
    It goes right up at the left hand edge. Why? Because floated elements
    don't cause the adjacent elements to move - the cause the content of
    adjacent elements to be reflowed.

    Try this to see what I mean:
    <p style="float:left; background: yellow; width: 50px; height:
    50px;"></p>
    <div style="border: 1px solid black; width:199px; height:480px;">here
    is a bunch of stuff, lets see where it goes here is a bunch of stuff,
    lets see where it goes here is a bunch of stuff, lets see where it
    goes </div>

    IE gets this wrong. Mozilla/Netscape gets it right. Opera gets it
    wrong in quirks mode and right in Standards mode.

    It's a mess, so you need to think about what you want and see if you
    can do it some other way (with different nesting of elements, or with
    margins instead of positioning).

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Apr 26, 2004
    #2
    1. Advertising

  3. "Steve Pugh" <> wrote in message
    news:p...
    > "Shawn Modersohn" <> wrote:
    >
    > >IE 6 displays this the way I want. Netscape7 doesn't seem to care that

    the
    > >paragraph is floated to the left. Its as though it is positioned

    relative
    > >to the window rather than the floated paragraph. It's my understanding

    that
    > >by specifying position:relative, the container will appear as it normally
    > >would in the flow of content. Basically, is this behaivor one of those
    > >inherent inconsistencies or is my form bad? I assume IE is getting this
    > >right and Nestscape wrong.

    >
    > Always a dangerous assumption.
    >
    > ><p style="float:left;">here is a bunch of stuff, lets see where it

    goes</p>
    > ><div id="Layer1" style="position:relative; border: 1px solid; left:80px;
    > >top:0px; width:199px; height:480px; z-index:1"></div>

    >
    > Imagine this without any positioning.
    >
    > <p style="float:left;">here is a bunch of stuff, lets see where it
    > goes</p>
    > <div style="border: 1px solid; width:199px; height:480px;"></div>
    >
    > Where does the div go?
    > It goes right up at the left hand edge. Why? Because floated elements
    > don't cause the adjacent elements to move - the cause the content of
    > adjacent elements to be reflowed.
    >
    > Try this to see what I mean:
    > <p style="float:left; background: yellow; width: 50px; height:
    > 50px;"></p>
    > <div style="border: 1px solid black; width:199px; height:480px;">here
    > is a bunch of stuff, lets see where it goes here is a bunch of stuff,
    > lets see where it goes here is a bunch of stuff, lets see where it
    > goes </div>
    >
    > IE gets this wrong. Mozilla/Netscape gets it right. Opera gets it
    > wrong in quirks mode and right in Standards mode.
    >
    > It's a mess, so you need to think about what you want and see if you
    > can do it some other way (with different nesting of elements, or with
    > margins instead of positioning).
    >
    > Steve
    >
    > --
    > "My theories appal you, my heresies outrage you,
    > I never answer letters and you don't like my tie." - The Doctor
    >
    > Steve Pugh <> <http://steve.pugh.net/>


    I guess I assumed that since I declared a <div> relevant to another
    element I was going to get a box beside the first block of content, just
    like IE does. Taken in context with the purpose of a float, to flow
    elements around, your explanation makes more sense I suppose. This was an
    exercise in academics mostly. Academics aside, I am working on
    http://webpages.charter.net/shawnmodersohn/tnttest.html . In Netscape, the
    center div flows to the left of a shorter left div as I would now expect
    while IE keeps the appearance of two distinct columns. I want everything
    fluid for any type of display. I am new to html and I decided if I am going
    to learn I will learn with the cutting edge in mind, distinguishing between
    the purposes of html, css, and xml. The navigation bar will eventually have
    hover effects but the links are all valid to the almost deployable table
    formatted site. Any input is appreciated.
     
    Shawn Modersohn, Apr 27, 2004
    #3
    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. johndesp
    Replies:
    0
    Views:
    654
    johndesp
    May 7, 2004
  2. Grumble

    Respecting the standard

    Grumble, Dec 17, 2003, in forum: C++
    Replies:
    8
    Views:
    344
    tom_usenet
    Dec 18, 2003
  3. Jim
    Replies:
    8
    Views:
    401
    Raymond Hettinger
    Jul 10, 2006
  4. Steve Hershoff
    Replies:
    0
    Views:
    418
    Steve Hershoff
    Aug 9, 2006
  5. Kosio

    Floats to chars and chars to floats

    Kosio, Sep 16, 2005, in forum: C Programming
    Replies:
    44
    Views:
    1,329
    Tim Rentsch
    Sep 23, 2005
Loading...

Share This Page