Question concering positioning in Microsoft B2 suite: left-091.htm

Hi all,

 

The test 'left-091.htm' (see below) contains two nested div's both with
a left-border. According to the test, the child's (black) border should
be positioned exactly on top of the parent's (red) border. According to
our calculation, the position of the child's border is actually to the
left of the parent's border.

 

The calculation of the position is done as follows:

 

1.       div1  starts at x=0 (assuming html, body and div have no
margin, border , or padding in the default style sheet)

2.       div1 has no margin, so the left-border is position at x=0 and
ends at x=1.5pt (2px = 1.5pt)

3.       div2 has div1 as its containing block, starting at x=1.5

4.       div2 has a margin of -1.02in (which equals -1.02*72=-73.44 pt)

5.       div2 has a relative left offset of 7.35ex (which equals 7.35 *
0.8 (ex-height of Ahem) * 12pt (font-size) = 70.56pt)

6.       thus, the left position of div2 is 1.5 - 73.44 + 70.56 =
-1.38pt

 

Since the width of div2's left-border is also 1.5pt, we get a black line
from x=-1.38 to x=0.12 and a red line from x=0 to x =1.5. 
This is not correct according to the description.


Is there something wrong with our calculation?

Please let us know if you have any thoughts about this issue, thanks in
advance.

 

Kind regards,

Robert Stam

TallComponents

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>CSS Test Suite: Left using 'ex' units with a nominal
value, 7.35ex</title>

        <link rel="author" title="Microsoft"
href="http://www.microsoft.com/" />

        <link rel="help"
href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" />

        <meta name="flags" content="ahem" />

        <meta name="assert" content="The 'left' property sets a nominal
&lt;length&gt; value in 'ex' units." />

        <style type="text/css">

            div

            {

                font: 12pt ahem;

                height: 1in;

                position: relative;

            }

            #div1

            {

                border-left: 2px solid red;

            }

            #div2

            {

                border-left: 2px solid black;

                margin-left: -1.02in;

                left: 7.35ex;

            }

        </style>

    </head>

    <body>

        <p>Test passes if there is no red visible on the page.</p>

        <div id="div1">

            <div id="div2"></div>

        </div>

    </body>

</html>

Received on Friday, 19 December 2008 18:54:10 UTC