What is wrong with this VML?

I received the following question as MSDN feedback on the VML documentation.

why is the following html not displaying as I want The start point of the line and the rect should be on one point.

Your question is a valid one, and maybe you¡¯ve already figured it out by now.

In your example, the RECT element is absolutely positioned, but the line is not. The line is painted starting at point (300,300) away from the bounding box of the containing div, in this case the BODY tag. The line is offset due to the default margins of the body, which the following CSS rule would remove:

body { margin:0 }

However, since you are painting a line to coincide with an absolutely positioned RECT, the LINE should also be absolutely positioned.

<v:rect style="POSITION:absolute; LEFT:300px; TOP:300px; WIDTH:100px; HEIGHT:100px" />

<v:line style="POSITION:absolute; LEFT:300px; TOP:300px;" from="0,0" to="100,100" />

For more complex drawings, it is easier to set all VML elements to position:absolute and place the elements inside a DIV that is located at the correct location on the page.

Hope that helps.