W3C home > Mailing lists > Public > www-style@w3.org > July 2008

Positioning pf a Line Box

From: Garrett Smith <dhtmlkitchen@gmail.com>
Date: Mon, 30 Jun 2008 17:19:23 -0700
Message-ID: <c9e12660806301719w35f2af32le4026e4abe00975a@mail.gmail.com>
To: Www-style <www-style@w3.org>

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

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>
    <meta http-equiv="content-type"
    content="text/html; charset=iso-8859-1" />
    <title>Client Rect: Inline</title>
<style type="text/css">

body {
    position: relative;
    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;
    background: #00c;
    line-height: 20em;




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

(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:
    target.style.fontFamily = "courier";
        coords = target.getBoundingClientRect( );
        alert([3 + 2, coords.top, "switched to " + target.style.fontFamily]);

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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:38 UTC