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

From: Robert Stam <robert@tallcomponents.com>
Date: Fri, 19 Dec 2008 12:52:01 -0600
Message-ID: <40BA97F694BF944EBB093147C342379005464571@34093-EVS2C2.exchange.rackspace.com>

Cc: <dbaron@dbaron.org>, <fantasai.lists@inkedblade.net>, <Arron.Eicholz@microsoft.com>, <Chris.Wilson@microsoft.com>, <bert@w3.org>, "Ranco Marcus" <ranco.marcus@epirion.nl>
```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?

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

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

href="http://www.microsoft.com/" />

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>

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

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 20 September 2010 17:51:57 GMT