IE rendering of text next to floating block

Discussion in 'HTML' started by Els, Feb 7, 2004.

  1. Els

    Els Guest

    Hi all,

    I have some text in a div, which is next to a floating div,
    containing a block. I set a left margin on the div with the
    text, to avoid flowing under the floating div.
    Now the text gets pushed slightly to the right, but only
    when next to the block. Below that level, it's further to
    the left.
    http://home.tiscali.nl/~elizabeth/test-3.html
    Is this normal for IE and do I have to live with it, or is
    there something I can do about it?
    I have tried absolute positioning the content div, which
    works to solve this, but then I can't find a way to position
    the bottom div at the bottom of the document.
    http://home.tiscali.nl/~elizabeth/test-4.html

    Another thing: I found that Opera (7.23) has a different
    idea about the position of the hover effect on the menu.
    Apparently, it 'counts' the distance of the absolutely
    positioned element (span) not from the relatively positioned
    parent element (menu), but from the also relatively
    positioned 'grand-parent' element (container), or maybe even
    the canvas.
    Did I do something wrong, or is Opera just rendering
    differently from IE and Moz?

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 7, 2004
    #1
    1. Advertising

  2. Els

    Steve Pugh Guest

    Els <> wrote:

    >I have some text in a div, which is next to a floating div,
    >containing a block. I set a left margin on the div with the
    >text, to avoid flowing under the floating div.
    >Now the text gets pushed slightly to the right, but only
    >when next to the block. Below that level, it's further to
    >the left.
    >http://home.tiscali.nl/~elizabeth/test-3.html
    >Is this normal for IE and do I have to live with it, or is
    >there something I can do about it?


    Yes, it's normal for IE. It's called the '3 pixel jog' bug.
    Under some cicumstancs it's fixable.
    See http://www.positioniseverything.net/explorer/threepxtest.html

    >Another thing: I found that Opera (7.23) has a different
    >idea about the position of the hover effect on the menu.
    >Apparently, it 'counts' the distance of the absolutely
    >positioned element (span) not from the relatively positioned
    >parent element (menu), but from the also relatively
    >positioned 'grand-parent' element (container), or maybe even
    >the canvas.
    >Did I do something wrong, or is Opera just rendering
    >differently from IE and Moz?


    Opera doesn't think that div.menu can be both positioned and floated.
    As the float is specified second it floats it and ignores the
    position: relative;

    I'm not sure if this is justifiable from the specs, but it has a
    certain logic. Positioning and floating are very different things are
    can rarely be used at the same time; the fact that all you want to do
    is set position: relative to act as an base for future positioning
    makes this frustrating.

    I'd remove the position: relative; from div.menu, and adjust the
    div.menu a:hover span to use top:14em; Now O7 and IE6 display the
    hover messages in the same location.

    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, Feb 7, 2004
    #2
    1. Advertising

  3. Els

    Els Guest

    Steve Pugh wrote:

    > Els <> wrote:
    >
    >>I have some text in a div, which is next to a floating div,
    >>containing a block. I set a left margin on the div with the
    >>text, to avoid flowing under the floating div.
    >>Now the text gets pushed slightly to the right, but only
    >>when next to the block. Below that level, it's further to
    >>the left.
    >>http://home.tiscali.nl/~elizabeth/test-3.html
    >>Is this normal for IE and do I have to live with it, or is
    >>there something I can do about it?

    >
    > Yes, it's normal for IE. It's called the '3 pixel jog' bug.


    That's a relieve :)

    > Under some cicumstancs it's fixable.
    > See http://www.positioniseverything.net/explorer/threepxtest.html


    I'll have a look there, thanks.

    >>Another thing: I found that Opera (7.23) has a different
    >>idea about the position of the hover effect on the menu.
    >>Apparently, it 'counts' the distance of the absolutely
    >>positioned element (span) not from the relatively positioned
    >>parent element (menu), but from the also relatively
    >>positioned 'grand-parent' element (container), or maybe even
    >>the canvas.
    >>Did I do something wrong, or is Opera just rendering
    >>differently from IE and Moz?

    >
    > Opera doesn't think that div.menu can be both positioned and floated.
    > As the float is specified second it floats it and ignores the
    > position: relative;
    >
    > I'm not sure if this is justifiable from the specs, but it has a
    > certain logic. Positioning and floating are very different things are
    > can rarely be used at the same time; the fact that all you want to do
    > is set position: relative to act as an base for future positioning
    > makes this frustrating.
    >
    > I'd remove the position: relative; from div.menu, and adjust the
    > div.menu a:hover span to use top:14em; Now O7 and IE6 display the
    > hover messages in the same location.


    Thanks a lot!
    Works now :)

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 7, 2004
    #3
  4. Els

    Els Guest

    Steve Pugh wrote:

    > Els <> wrote:
    >
    >>Did I do something wrong, or is Opera just rendering
    >>differently from IE and Moz?

    >
    > Opera doesn't think that div.menu can be both positioned and floated.
    > As the float is specified second it floats it and ignores the
    > position: relative;
    >
    > I'm not sure if this is justifiable from the specs, but it has a
    > certain logic. Positioning and floating are very different things are
    > can rarely be used at the same time; the fact that all you want to do
    > is set position: relative to act as an base for future positioning
    > makes this frustrating.
    >
    > I'd remove the position: relative; from div.menu, and adjust the
    > div.menu a:hover span to use top:14em; Now O7 and IE6 display the
    > hover messages in the same location.


    As I said in my previous post, I did what you said, and all
    was fine.
    Until I put a background color on the container div... all
    floating elements disappeared in IE.
    Looked it up through Google, and the only 'bug-repair' I
    could find that works, is putting position:relative on all
    floating elements.
    But as I can't put that on the div.menu, I can't see the
    menu at all.
    http://home.tiscali.nl/~elizabeth/test-5.html
    So I thought of position:absolute, and have it use top:11em,
    and it all works. Opera, Mozilla and IE display the whole
    page as intended.
    http://home.tiscali.nl/~elizabeth/test-6.html
    It's just, that the other day, I noticed, that absolute
    positioning inside another absolute positioned element,
    doesn't do what I want in Safari...

    Do you (or anyone else) know if that is wrong, or avoidable?
    And could anyone with a Safari browser please check for me?

    Thanks.

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 8, 2004
    #4
  5. Els

    Els Guest

    Els wrote:

    > Steve Pugh wrote:
    >
    >> Els <> wrote:
    >>
    >> I'd remove the position: relative; from div.menu, and adjust the
    >> div.menu a:hover span to use top:14em; Now O7 and IE6 display the
    >> hover messages in the same location.

    >
    >
    > As I said in my previous post, I did what you said, and all was fine.
    > Until I put a background color on the container div... all floating
    > elements disappeared in IE.
    > Looked it up through Google, and the only 'bug-repair' I could find that
    > works, is putting position:relative on all floating elements.
    > But as I can't put that on the div.menu, I can't see the menu at all.
    > http://home.tiscali.nl/~elizabeth/test-5.html
    > So I thought of position:absolute, and have it use top:11em, and it all
    > works. Opera, Mozilla and IE display the whole page as intended.
    > http://home.tiscali.nl/~elizabeth/test-6.html
    > It's just, that the other day, I noticed, that absolute positioning
    > inside another absolute positioned element, doesn't do what I want in
    > Safari...


    So.. I found a way (thanks to evolt.org) to avoid using
    positioning on the div.menu. I set a width on the container
    div.
    http://home.tiscali.nl/~elizabeth/test-7.html
    And now the background-color of the <p> doesn't come through...
    Until -with the local file- I resize the window or touch the
    menu. (but only comes up partly: top 5 lines don't have
    background-color)
    or -with the uploaded file- until I 'wipe' it with
    another window...

    I did hear about the peek-a-boo bug, but this isn't anything
    floating or text disappearing, but the background-color...

    Sometimes I think tables are a lot easier, and they can be
    pretty liquid too... :-(

    > Do you (or anyone else) know if that is wrong, or avoidable?
    > And could anyone with a Safari browser please check for me?


    So what is better? Using width on the container div and have
    probs with background-colors, or using position:absolute on
    the menu div and not knowing what Safari does with it?


    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 8, 2004
    #5
    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. Peter Ammon
    Replies:
    13
    Views:
    3,845
    Arin Chaudhuri
    Jun 15, 2004
  2. Steven D'Aprano

    Next floating point number

    Steven D'Aprano, Dec 17, 2005, in forum: Python
    Replies:
    9
    Views:
    423
    Tim Peters
    Dec 18, 2005
  3. morrell
    Replies:
    1
    Views:
    936
    roy axenov
    Oct 10, 2006
  4. Deniz Bahar
    Replies:
    2
    Views:
    451
    Andrey Tarasevich
    Mar 9, 2005
  5. teeshift
    Replies:
    2
    Views:
    242
    Chris Pearl
    Dec 1, 2006
Loading...

Share This Page