Another CSS question: IE6 negative margin problem

[guttyguppy]

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.

 

[Neredbojias]

With neither quill nor qualm, (e-mail address removed) 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?

 

[rf]

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;

 

[Neredbojias]

With neither quill nor qualm, rf quothed:

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.

 

[rf]

With neither quill nor qualm, rf quothed:


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.

 

[kchayka]

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.

 

[Neredbojias]

With neither quill nor qualm, rf quothed:

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.

 

[rf]

With neither quill nor qualm, rf quothed:


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

...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.

 

[Neredbojias]

With neither quill nor qualm, rf quothed:

With neither quill nor qualm, rf quothed:


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

...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.


Thanks.

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

 

[rf]

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