Another CSS question: IE6 negative margin problem

Discussion in 'HTML' started by guttyguppy@gmail.com, Oct 13, 2005.

  1. Guest

    Check out http://fieldii.com/pain.html in firefox, and then in IE6.
    Notice the callouts getting covered up in IE6? Is there a hack? Thanks
    for any help.
    , Oct 13, 2005
    #1
    1. Advertising

  2. Neredbojias Guest

    With neither quill nor qualm, quothed:

    > Check out http://fieldii.com/pain.html in firefox, and then in IE6.
    > Notice the callouts getting covered up in IE6? Is there a hack? Thanks
    > for any help.


    Nope. I tried everything I could think of (-nice, clean rendering of
    your markup, btw) and apparently the negative margins are just too much
    for IE.

    You *could* use a combination of floats and absolute-positioning,
    but...is it worth the complexity and redundancy?

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Oct 13, 2005
    #2
    1. Advertising

  3. rf Guest

    wrote:

    > Check out http://fieldii.com/pain.html in firefox, and then in IE6.
    > Notice the callouts getting covered up in IE6? Is there a hack?


    Yes (Nerodbojias) there is a hack.

    Negative margins will not allow (in IE) the callouts to break outside their
    container but relative positioning will.

    For the left, remove
    margin: left;

    Add
    position: relative; left: -50px;

    To fix up the text flow change
    margin-right: 10px;
    to
    margin-right: -40px;

    Similar (but the other way round) for the right callout:

    position: relative;
    left: 50px;
    margin-left: -40px;

    --
    Cheers
    Richard.
    rf, Oct 13, 2005
    #3
  4. Neredbojias Guest

    With neither quill nor qualm, rf quothed:

    > wrote:
    >
    > > Check out http://fieldii.com/pain.html in firefox, and then in IE6.
    > > Notice the callouts getting covered up in IE6? Is there a hack?

    >
    > Yes (Nerodbojias) there is a hack.
    >
    > Negative margins will not allow (in IE) the callouts to break outside their
    > container but relative positioning will.
    >
    > For the left, remove
    > margin: left;
    >
    > Add
    > position: relative; left: -50px;
    >
    > To fix up the text flow change
    > margin-right: 10px;
    > to
    > margin-right: -40px;
    >
    > Similar (but the other way round) for the right callout:
    >
    > position: relative;
    > left: 50px;
    > margin-left: -40px;


    Well, I was going for a hack for the floats. Anybody could do it with
    relative positioning.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Oct 13, 2005
    #4
  5. rf Guest

    Neredbojias wrote:

    > With neither quill nor qualm, rf quothed:
    >
    >> wrote:
    >>
    >>> Check out http://fieldii.com/pain.html in firefox, and then in IE6.
    >>> Notice the callouts getting covered up in IE6? Is there a hack?

    >>
    >> Yes (Nerodbojias) there is a hack.
    >>
    >> Negative margins will not allow (in IE) the callouts to break outside their
    >> container but relative positioning will.
    >>
    >> For the left, remove
    >> margin: left;
    >>
    >> Add
    >> position: relative; left: -50px;
    >>
    >> To fix up the text flow change
    >> margin-right: 10px;
    >> to
    >> margin-right: -40px;
    >>
    >> Similar (but the other way round) for the right callout:
    >>
    >> position: relative;
    >> left: 50px;
    >> margin-left: -40px;

    >
    > Well, I was going for a hack for the floats. Anybody could do it with
    > relative positioning.


    It's relatively positioned *as well as* floated.

    --
    Cheers
    Richard.
    rf, Oct 13, 2005
    #5
  6. kchayka Guest

    wrote:

    > Check out http://fieldii.com/pain.html in firefox, and then in IE6.
    > Notice the callouts getting covered up in IE6? Is there a hack?


    I believe this is a variation of the peek-a-boo bug. All you need to do
    is add to the floated callout classes:
    position: relative;

    Whenever IE shows squirrelly rendering like this, the first thing I do
    is add position:relative. Very often, this clears the problem right up.
    If that doesn't work, try
    zoom: 1.0;

    That's a proprietary property other browsers will happily ignore, but
    can cure a host of IE weirdness.

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
    kchayka, Oct 14, 2005
    #6
  7. Neredbojias Guest

    With neither quill nor qualm, rf quothed:

    > Neredbojias wrote:
    >
    > > With neither quill nor qualm, rf quothed:
    > >
    > >> wrote:
    > >>
    > >>> Check out http://fieldii.com/pain.html in firefox, and then in IE6.
    > >>> Notice the callouts getting covered up in IE6? Is there a hack?
    > >>
    > >> Yes (Nerodbojias) there is a hack.
    > >>
    > >> Negative margins will not allow (in IE) the callouts to break outside their
    > >> container but relative positioning will.
    > >>
    > >> For the left, remove
    > >> margin: left;
    > >>
    > >> Add
    > >> position: relative; left: -50px;
    > >>
    > >> To fix up the text flow change
    > >> margin-right: 10px;
    > >> to
    > >> margin-right: -40px;
    > >>
    > >> Similar (but the other way round) for the right callout:
    > >>
    > >> position: relative;
    > >> left: 50px;
    > >> margin-left: -40px;

    > >
    > > Well, I was going for a hack for the floats. Anybody could do it with
    > > relative positioning.

    >
    > It's relatively positioned *as well as* floated.


    I see. I was under the impression that positioned elements could not be
    floated...

    (w3c css2 spec re. floats: "Applies to: all but positioned elements and
    generated content")

    ....but apparently by "positioned elements" the illustrious wucccy meant
    "absolutely positioned" elements which further seem to mean elements
    positioned in either the absolute or fixed variety (but not relative).

    Nice fix, btw.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Oct 14, 2005
    #7
  8. rf Guest

    Neredbojias wrote:

    > With neither quill nor qualm, rf quothed:
    >
    >> Neredbojias wrote:
    >>
    >>> With neither quill nor qualm, rf quothed:
    >>>
    >>>> wrote:
    >>>>
    >>>>> Check out http://fieldii.com/pain.html in firefox, and then in IE6.
    >>>>> Notice the callouts getting covered up in IE6? Is there a hack?
    >>>>
    >>>> Yes (Nerodbojias) there is a hack.
    >>>>
    >>>> Negative margins will not allow (in IE) the callouts to break outside their
    >>>> container but relative positioning will.
    >>>>
    >>>> For the left, remove
    >>>> margin: left;
    >>>>
    >>>> Add
    >>>> position: relative; left: -50px;
    >>>>
    >>>> To fix up the text flow change
    >>>> margin-right: 10px;
    >>>> to
    >>>> margin-right: -40px;
    >>>>
    >>>> Similar (but the other way round) for the right callout:
    >>>>
    >>>> position: relative;
    >>>> left: 50px;
    >>>> margin-left: -40px;
    >>>
    >>> Well, I was going for a hack for the floats. Anybody could do it with
    >>> relative positioning.

    >>
    >> It's relatively positioned *as well as* floated.

    >
    > I see. I was under the impression that positioned elements could not be
    > floated...


    > (w3c css2 spec re. floats: "Applies to: all but positioned elements and
    > generated content")


    I'm looking at the css2.1 draft but it says:
    http://www.w3.org/TR/CSS21/visuren.html#propdef-float
    "[float] only applies to elements that generate boxes that are not
    *absolutely positioned*" <checks/> yep, css2 says that as well.

    > ...but apparently by "positioned elements" the illustrious wucccy meant
    > "absolutely positioned" elements which further seem to mean elements
    > positioned in either the absolute or fixed variety (but not relative).


    Correct, however said wucccy probably meant "taken out of the flow".
    Absolute and fixed positioned elements are taken out of the flow and so
    float would have no meaning for them. There is nowhere to float them *to*.

    Taken the other way round, if an element is both floated *and* absolutely
    positioned where does it live? You can't absolutely position it and then
    float it, it can't float anywhere. Say you float it first. Then, by
    absolutely positioning it, you take it out of the flow and float no longer
    has any meaning. The two are mutually exclusive.

    Relatively positioned elements are not, however, taken out of the flow. The
    relative positioning happens *after* the page has been layed out. What
    position relative means is: lay out the page and then *move* this element
    by a certain amount. A floated element is just another element in the flow.
    True, it has been moved (relative to its containing element) but it is
    still in the flow and can be relatively positioned.

    Relative and float are not mutually exclusive.

    IMHO there is confusion in here. Relative should not be a value for the
    position property but rather a seperate property/value thing. Absolute
    happens before the rest of the page is layed out. Relative happens *after*
    the page is layed out. Also, ISTM that one could conceivably relatively
    position an absolutely positioned element. That is, position it *here* but
    then *move* it by this amount .

    Why are absolute and realitive mutually exclusive? Well, one reason is that
    they are both values for the same property :)


    Furthur to this is rule one under floats: "The outer edge of the left
    floating box may not be to the left edge of its containing block".

    FF is behaving correctly here as the floated elements containing block is
    the <body> element (since no ancestor blocks have position mentioned (well,
    not true in this example, there is a container div that has position
    relative but that is another matter, as is the rather bad CSS used to
    position the various bits on this page))

    IE Is not behaving correctly. IE seems to be considering the floated
    elements immediate parent to be its containing element. Broken box model
    probably, even though the page is not firing quirks mode.

    > Nice fix, btw.


    Thanks.

    --
    Cheers
    Richard.
    rf, Oct 14, 2005
    #8
  9. Neredbojias Guest

    With neither quill nor qualm, rf quothed:

    > Neredbojias wrote:
    >
    > > With neither quill nor qualm, rf quothed:
    > >
    > >> Neredbojias wrote:
    > >>
    > >>> With neither quill nor qualm, rf quothed:
    > >>>
    > >>>> wrote:
    > >>>>
    > >>>>> Check out http://fieldii.com/pain.html in firefox, and then in IE6.
    > >>>>> Notice the callouts getting covered up in IE6? Is there a hack?
    > >>>>
    > >>>> Yes (Nerodbojias) there is a hack.
    > >>>>
    > >>>> Negative margins will not allow (in IE) the callouts to break outside their
    > >>>> container but relative positioning will.
    > >>>>
    > >>>> For the left, remove
    > >>>> margin: left;
    > >>>>
    > >>>> Add
    > >>>> position: relative; left: -50px;
    > >>>>
    > >>>> To fix up the text flow change
    > >>>> margin-right: 10px;
    > >>>> to
    > >>>> margin-right: -40px;
    > >>>>
    > >>>> Similar (but the other way round) for the right callout:
    > >>>>
    > >>>> position: relative;
    > >>>> left: 50px;
    > >>>> margin-left: -40px;
    > >>>
    > >>> Well, I was going for a hack for the floats. Anybody could do it with
    > >>> relative positioning.
    > >>
    > >> It's relatively positioned *as well as* floated.

    > >
    > > I see. I was under the impression that positioned elements could not be
    > > floated...

    >
    > > (w3c css2 spec re. floats: "Applies to: all but positioned elements and
    > > generated content")

    >
    > I'm looking at the css2.1 draft but it says:
    > http://www.w3.org/TR/CSS21/visuren.html#propdef-float
    > "[float] only applies to elements that generate boxes that are not
    > *absolutely positioned*" <checks/> yep, css2 says that as well.
    >
    > > ...but apparently by "positioned elements" the illustrious wucccy meant
    > > "absolutely positioned" elements which further seem to mean elements
    > > positioned in either the absolute or fixed variety (but not relative).

    >
    > Correct, however said wucccy probably meant "taken out of the flow".
    > Absolute and fixed positioned elements are taken out of the flow and so
    > float would have no meaning for them. There is nowhere to float them *to*.
    >
    > Taken the other way round, if an element is both floated *and* absolutely
    > positioned where does it live? You can't absolutely position it and then
    > float it, it can't float anywhere. Say you float it first. Then, by
    > absolutely positioning it, you take it out of the flow and float no longer
    > has any meaning. The two are mutually exclusive.


    True, and it makes no sense, anyway, since absolute positioned stuff can
    be located anywhere.

    > Relatively positioned elements are not, however, taken out of the flow. The
    > relative positioning happens *after* the page has been layed out. What
    > position relative means is: lay out the page and then *move* this element
    > by a certain amount. A floated element is just another element in the flow.
    > True, it has been moved (relative to its containing element) but it is
    > still in the flow and can be relatively positioned.
    >
    > Relative and float are not mutually exclusive.
    >
    > IMHO there is confusion in here. Relative should not be a value for the
    > position property but rather a seperate property/value thing. Absolute
    > happens before the rest of the page is layed out. Relative happens *after*
    > the page is layed out. Also, ISTM that one could conceivably relatively
    > position an absolutely positioned element. That is, position it *here* but
    > then *move* it by this amount .


    Perhaps it would have been less confusing if they'd called it "offset
    positioning" or just "offset" as the attribute with x,y content.

    >
    > Why are absolute and realitive mutually exclusive? Well, one reason is that
    > they are both values for the same property :)


    Uh, so, I thought, about "block" and "inline"!
    >
    > Furthur to this is rule one under floats: "The outer edge of the left
    > floating box may not be to the left edge of its containing block".
    >
    > FF is behaving correctly here as the floated elements containing block is
    > the <body> element (since no ancestor blocks have position mentioned (well,
    > not true in this example, there is a container div that has position
    > relative but that is another matter, as is the rather bad CSS used to
    > position the various bits on this page))
    >
    > IE Is not behaving correctly. IE seems to be considering the floated
    > elements immediate parent to be its containing element. Broken box model
    > probably, even though the page is not firing quirks mode.
    >
    > > Nice fix, btw.

    >
    > Thanks.


    Good explanation, thanks. You were born to be a teacher (but I still
    really hated school. -Except recess.)

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Oct 14, 2005
    #9
  10. rf Guest

    Neredbojias wrote:

    >> Neredbojias wrote:


    >>> Nice fix, btw.


    I like kchayka's better, nailing the peekaboo bug :)

    Though I guess both approaches achive similar things, namely introducing
    position: relative to the offending element.

    The differences being the OP's positioning involves negative margins (I
    somehow don't *like* negative margins) whereas mine involves actually
    positioning (relative) the whole element. However, still with negative
    margins I just realise :)

    --
    Cheers
    Richard.
    rf, Oct 14, 2005
    #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. prem_eda
    Replies:
    5
    Views:
    7,845
    Pieter Hulshoff
    Oct 11, 2004
  2. chlori

    margin-right in IE6

    chlori, Jul 11, 2003, in forum: HTML
    Replies:
    2
    Views:
    3,578
  3. Cylix
    Replies:
    1
    Views:
    7,122
  4. Cal Who
    Replies:
    1
    Views:
    427
    Alexey Smirnov
    May 16, 2010
  5. Cal Who
    Replies:
    4
    Views:
    572
    Cal Who
    May 17, 2010
Loading...

Share This Page