IE5.5 and absolute position of a div

Discussion in 'HTML' started by david graham, Sep 11, 2003.

  1. david graham

    david graham Guest

    Hi
    I tried the c.i.w.a.s group with the post below, but they must think it is a
    trivial or non-issue type of thing as no one replied. Please, it matters to
    me - will this group just take a quick look at what I have illustrated at
    the web address below. What I want is reassurance that this behaviour is
    well known for IE5.5 and that there is a hack available.
    I assume IE5 would behave in a similar fashion - anyone got that browser,
    and if there are any IE6 users, could you let me know if it gets it correct
    like NN7 and Opera7.1




    Hi
    I have only got NN7, Opera 7.1 and IE5.5 to test with. Anyway, please
    have a look at

    http://p0c79.phpwebhosting.com/~p0c79/test100.html

    The absolutely positioned red div is correctly positioned at the top left
    corner of the blue div in NN7 and Opera7.1, but it is situated at the top
    right corner of the purple div in IE5.5

    Can anyone explain the difference in behaviour with regards to how IE5.5
    handles the absolutely positioed red div.

    thanks
    david
    david graham, Sep 11, 2003
    #1
    1. Advertising

  2. david graham

    rf Guest

    "david graham" <> wrote in message
    news:eek:LV7b.33$...
    >
    > http://p0c79.phpwebhosting.com/~p0c79/test100.html
    >
    > The absolutely positioned red div is correctly positioned at the top left
    > corner of the blue div in NN7 and Opera7.1, but it is situated at the top
    > right corner of the purple div in IE5.5
    >
    > Can anyone explain the difference in behaviour with regards to how IE5.5
    > handles the absolutely positioed red div.


    The same thing happens with IE6 in quirks mode.

    It's part of the horrendously bad IE5 box model. IE5 gets very confused
    placing things inside other things. Your workaround is to absolutely
    position the blue div (why are you relatively positioning it anyway?). You
    will then also have to specify width: 100% for that div.

    Cheers
    Richard.
    rf, Sep 11, 2003
    #2
    1. Advertising

  3. David Dorward, Sep 11, 2003
    #3
  4. david graham wrote:
    > http://p0c79.phpwebhosting.com/~p0c79/test100.html
    >
    > The absolutely positioned red div is correctly positioned at the top left
    > corner of the blue div in NN7 and Opera7.1, but it is situated at the top
    > right corner of the purple div in IE5.5


    I had a similar problem, I'm not certain, but I _this_ I solved it by not
    specifying "left" for the abs pos div. I don't have a copy of MSIE to hand
    for testing right now though, so you'll have to try it yourself.


    --
    David Dorward http://dorward.me.uk/
    David Dorward, Sep 11, 2003
    #4
  5. david graham

    andy johnson Guest

    On Thu, 11 Sep 2003 08:39:04 +0100, "david graham"
    <> wrote:

    >Hi


    >I have only got NN7, Opera 7.1 and IE5.5 to test with. Anyway, please
    >have a look at
    >
    >http://p0c79.phpwebhosting.com/~p0c79/test100.html
    >


    >thanks
    >david
    >
    >

    You can use browsercam to look at any web page in a multitude of
    browsers, it's great.


    -
    Andy

    "There would be a lot more civility in this world if people
    didn't take that as an invitation to walk all over you"
    - (Calvin and Hobbes)
    andy johnson, Sep 11, 2003
    #5
  6. david graham

    rf Guest

    "David Dorward" <> wrote in message
    news:bjpdos$n4a$1$...
    > rf wrote:
    >
    > >> http://p0c79.phpwebhosting.com/~p0c79/test100.html

    >
    > > position the blue div (why are you relatively positioning it anyway?).

    >
    > Presumably to establish a local context to position things inside so that

    a
    > variable height header can be used.


    So why position it at all? Just let it flow after the variable height
    header. Oh, yes, if one wants to position something *inside* that div then
    it must have a position: other than static (so it becomes a containing
    element) but then position: relative; without the top: is in order.

    My presumption was that the OP is not really clear on what position:
    relative really does. Ping the original david: how are we doing here?

    Cheers
    Richard.
    rf, Sep 11, 2003
    #6
  7. david graham

    rf Guest

    "David Dorward" <> wrote in message
    news:bjpdrn$n4a$2$...
    > david graham wrote:
    > > http://p0c79.phpwebhosting.com/~p0c79/test100.html
    > >
    > > The absolutely positioned red div is correctly positioned at the top

    left
    > > corner of the blue div in NN7 and Opera7.1, but it is situated at the

    top
    > > right corner of the purple div in IE5.5

    >
    > I had a similar problem, I'm not certain, but I _this_ I solved it by not
    > specifying "left" for the abs pos div. I don't have a copy of MSIE to hand
    > for testing right now though, so you'll have to try it yourself.


    I do have IE and yes David your solution works admirably (at least for IE6
    in quirks mode).

    Makes you wonder what those Redmondians were smoking at the time :)

    Cheers
    Richard.
    rf, Sep 11, 2003
    #7
  8. david graham

    david graham Guest

    "rf" <> wrote in message
    news:VnX7b.94431$...
    >
    > "David Dorward" <> wrote in message
    > news:bjpdos$n4a$1$...
    > > rf wrote:
    > >
    > > >> http://p0c79.phpwebhosting.com/~p0c79/test100.html

    > >
    > > > position the blue div (why are you relatively positioning it anyway?).

    > >
    > > Presumably to establish a local context to position things inside so

    that
    > a
    > > variable height header can be used.

    >
    > So why position it at all? Just let it flow after the variable height
    > header. Oh, yes, if one wants to position something *inside* that div then
    > it must have a position: other than static (so it becomes a containing
    > element) but then position: relative; without the top: is in order.
    >
    > My presumption was that the OP is not really clear on what position:
    > relative really does. Ping the original david: how are we doing here?
    >
    > Cheers
    > Richard.
    >

    Hi
    Thanks for looking into this for me. I relatively positioned the blue div so
    that it would act as a containing block for the absolutely positioned red
    div. This is a learning exercise for me. The top:200px bit was simply an
    after thought, I wanted to be sure that the absolutely positioned red div
    was not just ignoring the left:0 and top:0, it was more obvious to me that
    the red div was positioning itself correctly if it had to position itself to
    the blue div when the blue div was itself under orders to go 200px down the
    screen. I can see now that this was introducing an extra, and unnecessary
    complicating factor. When I use these ideas for real, the relative div would
    have no top or left, it would be allowed to go with the flow.
    I will try out the suggestions from David Dorward now.
    many thanks
    David
    david graham, Sep 11, 2003
    #8
  9. david graham

    rf Guest

    "david graham" <> wrote in message
    news:QQX7b.212$...
    >
    > "rf" <> wrote in message
    > news:VnX7b.94431$...
    > >
    > > "David Dorward" <> wrote in message
    > > news:bjpdos$n4a$1$...
    > > > rf wrote:
    > > >
    > > > >> http://p0c79.phpwebhosting.com/~p0c79/test100.html
    > > >
    > > > > position the blue div (why are you relatively positioning it

    anyway?).
    > > >
    > > > Presumably to establish a local context to position things inside so

    > that
    > > a
    > > > variable height header can be used.

    > >
    > > So why position it at all? Just let it flow after the variable height
    > > header. Oh, yes, if one wants to position something *inside* that div

    then
    > > it must have a position: other than static (so it becomes a containing
    > > element) but then position: relative; without the top: is in order.
    > >
    > > My presumption was that the OP is not really clear on what position:
    > > relative really does. Ping the original david: how are we doing here?
    > >
    > > Cheers
    > > Richard.
    > >

    > Hi
    > Thanks for looking into this for me.


    That's why we lurk here :)

    > I relatively positioned the blue div so
    > that it would act as a containing block for the absolutely positioned red
    > div. This is a learning exercise for me. The top:200px bit was simply an
    > after thought, I wanted to be sure that the absolutely positioned red div
    > was not just ignoring the left:0 and top:0, it was more obvious to me that
    > the red div was positioning itself correctly if it had to position itself

    to
    > the blue div when the blue div was itself under orders to go 200px down

    the
    > screen. I can see now that this was introducing an extra, and unnecessary
    > complicating factor.


    Er, yes.

    > When I use these ideas for real, the relative div would
    > have no top or left, it would be allowed to go with the flow.


    That's the way to do it :)

    > I will try out the suggestions from David Dorward now.


    It's the one that works best, he often gets it right :)

    Cheers
    Richard.
    rf, Sep 11, 2003
    #9
  10. david graham

    rf Guest

    "andy johnson" <> wrote in message
    news:...
    > On Thu, 11 Sep 2003 08:39:04 +0100, "david graham"
    > <> wrote:
    >
    > >Hi

    >
    > >I have only got NN7, Opera 7.1 and IE5.5 to test with. Anyway, please
    > >have a look at
    > >
    > >http://p0c79.phpwebhosting.com/~p0c79/test100.html
    > >

    >
    > >thanks
    > >david
    > >
    > >

    > You can use browsercam to look at any web page in a multitude of
    > browsers, it's great.


    At a dollar a go? Hmmm. Testing a page should be hand in hand with writing
    it. That is, write a couple of lines, test it. I can see $$$'s. Enterprising
    people though.

    Ok for final bets test check I suppose.

    Cheers
    Richard.
    rf, Sep 11, 2003
    #10
  11. rf wrote:

    > Makes you wonder what those Redmondians were smoking at the time :)


    It was a case of...

    Why is it treating "left" as "inside the padding"?
    I hate MSIE!
    Argh!
    What if I remove the left?
    Blimin' 'eck!
    Why does that work!?
    OK, breath deep.
    No side effects in other browsers that I can see.
    OK OK. Lets let it go live then.

    --
    David Dorward http://dorward.me.uk/
    David Dorward, Sep 11, 2003
    #11
  12. david graham

    rf Guest

    "David Dorward" <> wrote in message
    news:bjpk0s$lr2$3$...
    > rf wrote:
    >
    > > Makes you wonder what those Redmondians were smoking at the time :)

    >
    > It was a case of...
    >
    > Why is it treating "left" as "inside the padding"?
    > I hate MSIE!
    > Argh!
    > What if I remove the left?
    > Blimin' 'eck!
    > Why does that work!?


    It's like a fire. Poke it with a stick long enough and it'l blaze away for
    you.

    > OK, breath deep.
    > No side effects in other browsers that I can see.
    > OK OK. Lets let it go live then.


    Good move. You've fixed it, don't try to repair it.

    IIRC I've found that position: absolute without top: leaves the offending
    element within the flow. One would think that the top: should default to 0.
    But then again maybe not, should absence of top: negate position: absolute;
    but then again maybe I should re-re-read that bit of the spece, but then
    again... er maybe it's time for a quiet rum and cola and some bedtime.

    Cheers
    Richard.
    rf, Sep 11, 2003
    #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. Luqman
    Replies:
    1
    Views:
    642
    Luqman
    Feb 7, 2006
  2. Tom
    Replies:
    0
    Views:
    1,012
  3. Luigi Donatello Asero

    <div class="position"> and <div class" section">

    Luigi Donatello Asero, May 6, 2006, in forum: HTML
    Replies:
    31
    Views:
    1,158
    Toby Inkster
    May 7, 2006
  4. Luigi Donatello Asero

    Re: <div class="position"> and <div class" section">

    Luigi Donatello Asero, May 6, 2006, in forum: HTML
    Replies:
    0
    Views:
    389
    Luigi Donatello Asero
    May 6, 2006
  5. nick
    Replies:
    8
    Views:
    175
Loading...

Share This Page