Positioning pf a Line Box

How does a line box get it's - top - value?

In firefox, the top value seems to include the parent line boxes leading.

Is there a way to calculate the position of an element and assert that
that calculation is correct?

IOW, If I have a line box B in a line box P, and B has text-align:
top, it seems that B's top value is starting at the leading P's line
box.

Is this correct? If so, then how can I know where P's line box starts?

Here is an example of that, where B is #target and P is #c1:-

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type"
    content="text/html; charset=iso-8859-1" />
    <title>Client Rect: Inline</title>
<style type="text/css">

body {
    position: relative;
    margin:0;
    padding:0;
    font-size:0;
    height: 100px;
}

#target {
    position: relative;
    top: 0;
    left: 1px;
    padding: 0;
    font-size: 12px;
    line-height: 14px;
    display: inline;
    background: #FF0;
    font-family: courier new;
    vertical-align: top;
}

#c1 {
    position: absolute;
    left: 1px;
    top: 0;
    height: 90px;
    padding:0;
    background: #00c;
    line-height: 20em;
}

</style>

</head>

<body>

    <div id="c1">
        <a id="target">a</a>
    </div>

<script>
(function testTargetInline() {

    // XXX Fails in Firefox 3.
    // http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/

    var target = document.getElementById("target");

    var coords = target.getBoundingClientRect( );
    alert([3 + 2, coords.top, "target was display: inline; position:
relative"]);
    target.style.fontFamily = "courier";
    setTimeout(function(){
        coords = target.getBoundingClientRect( );
        alert([3 + 2, coords.top, "switched to " + target.style.fontFamily]);
    },40)();
})();
</script>
</body>
</html>

Garrett

Received on Tuesday, 1 July 2008 00:20:01 UTC