CSS: bad interaction between position and margin

The following code snippet produces two slashes
/ \
as it should:

<DIV STYLE="POSITION: ABSOLUTE" >/</DIV
><DIV TITLE="an artificial separator for IE"></DIV
><DIV STYLE="MARGIN-LEFT: 20EM">\</DIV >

If you remove the middle DIV, you get an X way to the right (the slashes
overlap).

Why is that?

PA
Thu May 08 10:45:25 PDT 2008

See these MSDN pages: http://msdn2.microsoft.com/en-us/ie/default.aspx &
http://msdn2.microsoft.com/en-us/ie/aa740476.aspx

MSDN IE Development Forums
http://forums.microsoft.com/MSDN/default.aspx?ForumGroupID=253&SiteID=1
--
~Robear Dyer (PA Bear)
MS MVP-IE, Mail, Security, Windows Desktop Experience - since 2002
AumHa VSOP & Admin http://aumha.net
DTS-L http://dts-l.net/

Krzysztof Żelechowski wrote:
> The following code snippet produces two slashes
> / \
> as it should:
>
> <DIV STYLE="POSITION: ABSOLUTE" >/</DIV
>> <DIV TITLE="an artificial separator for IE"></DIV
>> <DIV STYLE="MARGIN-LEFT: 20EM">\</DIV >
>
> If you remove the middle DIV, you get an X way to the right (the slashes
> overlap).
>
> Why is that?

rob^_^
Thu May 08 15:37:53 PDT 2008

Hi Krzysztof,

Try one of the many Developer Addons now available for IE to investigate
styling and DOM issues.

Debugbar - http://www.debugbar.com

IEWatch - http://www.iewatch.com

IE Developer Toolbar -
http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

You may also like to beef-up on Quirks and Standards mode of browsers by
researching the use of Doctype declarations. See http://www.w3.org/


Regards.

"Krzysztof Żelechowski" <yecril71pl@community.nospam> wrote in message
news:D1722F93-BCEA-423A-A0F4-A2CC197DF134@microsoft.com...
> The following code snippet produces two slashes
> / \
> as it should:
>
> <DIV STYLE="POSITION: ABSOLUTE" >/</DIV
>><DIV TITLE="an artificial separator for IE"></DIV
>><DIV STYLE="MARGIN-LEFT: 20EM">\</DIV >
>
> If you remove the middle DIV, you get an X way to the right (the slashes
> overlap).
>
> Why is that?
>

yecril71pl
Thu May 08 21:29:00 PDT 2008



"rob^_^" wrote:

> Hi Krzysztof,
>
> Try one of the many Developer Addons now available for IE to investigate
> styling and DOM issues.
>
> IE Developer Toolbar -
> http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

It does not show any anomalies in the first DIV.

>
> You may also like to beef-up on Quirks and Standards mode of browsers by
> researching the use of Doctype declarations. See http://www.w3.org/
>

The DOCTYPE is HTML 4.01 and both HTML and CSS are valid.
Trident does something really weird here. Gecko does not have this problem
at all.

>
> Regards.
>
> "Krzysztof Żelechowski" <yecril71pl@community.nospam> wrote in message
> news:D1722F93-BCEA-423A-A0F4-A2CC197DF134@microsoft.com...
> > The following code snippet produces two slashes
> > / \
> > as it should:
> >
> > <DIV STYLE="POSITION: ABSOLUTE" >/</DIV
> >><DIV TITLE="an artificial separator for IE"></DIV
> >><DIV STYLE="MARGIN-LEFT: 20EM">\</DIV >
> >
> > If you remove the middle DIV, you get an X way to the right (the slashes
> > overlap).
> >
> > Why is that?
> >

rob^_^
Thu May 08 22:22:16 PDT 2008

Ok,

I will give it a try with IE8 and post it on MS connect if it appears in
IE8. Thanks for the doctype info. Will post back here.

Regards.

"Krzysztof Żelechowski" <yecril71pl@community.nospam> wrote in message
news:E4FCBE88-BC8F-41D8-8CF7-ED3D4AB5258A@microsoft.com...
>
>
> "rob^_^" wrote:
>
>> Hi Krzysztof,
>>
>> Try one of the many Developer Addons now available for IE to investigate
>> styling and DOM issues.
>>
>> IE Developer Toolbar -
>> http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en
>
> It does not show any anomalies in the first DIV.
>
>>
>> You may also like to beef-up on Quirks and Standards mode of browsers by
>> researching the use of Doctype declarations. See http://www.w3.org/
>>
>
> The DOCTYPE is HTML 4.01 and both HTML and CSS are valid.
> Trident does something really weird here. Gecko does not have this
> problem
> at all.
>
>>
>> Regards.
>>
>> "Krzysztof Żelechowski" <yecril71pl@community.nospam> wrote in message
>> news:D1722F93-BCEA-423A-A0F4-A2CC197DF134@microsoft.com...
>> > The following code snippet produces two slashes
>> > / \
>> > as it should:
>> >
>> > <DIV STYLE="POSITION: ABSOLUTE" >/</DIV
>> >><DIV TITLE="an artificial separator for IE"></DIV
>> >><DIV STYLE="MARGIN-LEFT: 20EM">\</DIV >
>> >
>> > If you remove the middle DIV, you get an X way to the right (the
>> > slashes
>> > overlap).
>> >
>> > Why is that?
>> >

rob^_^
Sat May 10 16:25:53 PDT 2008

Hi K,

The issue has been corrected in IE8.

I don't believe there are any plans to make IE6/7 CSS 2.1 compliant in
standards mode. It appears the problem is caused by 'haslayout'. If you
define the left value of the absolutely positioned div then the test page
will render fine in earlier versions of IE.

Regards.

"rob^_^" <iecustomizer@hotmail.com> wrote in message
news:7179E357-2F0F-4B25-B986-B7CF6FBB4475@microsoft.com...
> Ok,
>
> I will give it a try with IE8 and post it on MS connect if it appears in
> IE8. Thanks for the doctype info. Will post back here.
>
> Regards.
>
> "Krzysztof Żelechowski" <yecril71pl@community.nospam> wrote in message
> news:E4FCBE88-BC8F-41D8-8CF7-ED3D4AB5258A@microsoft.com...
>>
>>
>> "rob^_^" wrote:
>>
>>> Hi Krzysztof,
>>>
>>> Try one of the many Developer Addons now available for IE to
>>> investigate
>>> styling and DOM issues.
>>>
>>> IE Developer Toolbar -
>>> http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en
>>
>> It does not show any anomalies in the first DIV.
>>
>>>
>>> You may also like to beef-up on Quirks and Standards mode of browsers by
>>> researching the use of Doctype declarations. See http://www.w3.org/
>>>
>>
>> The DOCTYPE is HTML 4.01 and both HTML and CSS are valid.
>> Trident does something really weird here. Gecko does not have this
>> problem
>> at all.
>>
>>>
>>> Regards.
>>>
>>> "Krzysztof Żelechowski" <yecril71pl@community.nospam> wrote in message
>>> news:D1722F93-BCEA-423A-A0F4-A2CC197DF134@microsoft.com...
>>> > The following code snippet produces two slashes
>>> > / \
>>> > as it should:
>>> >
>>> > <DIV STYLE="POSITION: ABSOLUTE" >/</DIV
>>> >><DIV TITLE="an artificial separator for IE"></DIV
>>> >><DIV STYLE="MARGIN-LEFT: 20EM">\</DIV >
>>> >
>>> > If you remove the middle DIV, you get an X way to the right (the
>>> > slashes
>>> > overlap).
>>> >
>>> > Why is that?
>>> >