Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Another CSS question: IE6 negative margin problem

Reply
Thread Tools

Another CSS question: IE6 negative margin problem

 
 
guttyguppy@gmail.com
Guest
Posts: n/a
 
      10-13-2005
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.

 
Reply With Quote
 
 
 
 
Neredbojias
Guest
Posts: n/a
 
      10-13-2005
With neither quill nor qualm, http://www.velocityreviews.com/forums/(E-Mail 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?

--
Neredbojias
Contrary to popular belief, it is believable.
 
Reply With Quote
 
 
 
 
rf
Guest
Posts: n/a
 
      10-13-2005
(E-Mail Removed) 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.
 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      10-13-2005
With neither quill nor qualm, rf quothed:

> (E-Mail Removed) 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.
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      10-13-2005
Neredbojias wrote:

> With neither quill nor qualm, rf quothed:
>
>> (E-Mail Removed) 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.
 
Reply With Quote
 
kchayka
Guest
Posts: n/a
 
      10-14-2005
(E-Mail Removed) 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.
 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      10-14-2005
With neither quill nor qualm, rf quothed:

> Neredbojias wrote:
>
> > With neither quill nor qualm, rf quothed:
> >
> >> (E-Mail Removed) 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.
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      10-14-2005
Neredbojias wrote:

> With neither quill nor qualm, rf quothed:
>
>> Neredbojias wrote:
>>
>>> With neither quill nor qualm, rf quothed:
>>>
>>>> (E-Mail Removed) 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.
 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      10-14-2005
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:
> >>>
> >>>> (E-Mail Removed) 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.
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      10-14-2005
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.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to have margin-left: 10%; margin-right: 10%; only sometimes?? Cal Who ASP .Net 4 05-17-2010 12:17 PM
How to have margin-left: 10%; margin-right: 10%;" only sometimes Cal Who ASP .Net 1 05-16-2010 08:53 PM
Epson 4000 - margin to margin? nobody Digital Photography 6 03-28-2005 05:17 PM
Negative setup and Negative hold prem_eda VHDL 5 10-11-2004 12:14 PM
margin-right in IE6 chlori HTML 2 07-14-2003 10:48 AM



Advertisments