Dynamic DIV and P creation offsets the P

Discussion in 'Javascript' started by Andrew Poulos, Dec 1, 2005.

  1. I'm building a DIV dynamically and putting a P into it like so:

    var oDiv = document.createElement("DIV");
    var oP = document.createElement("P");
    oP.style.backgroundColor = "green";
    oP.appendChild( document.createTextNode("some sample text") );
    oDiv.appendChild(oP);

    oDiv.style.position = "absolute";
    oDiv.style.left = "100px";
    oDiv.style.top = "100px";
    oDiv.style.width = "200px";
    oDiv.style.height = "150px";
    oDiv.style.backgroundColor = "blue";

    document.body.appendChild(oDiv);


    The problem is that FF doesn't put the P in the top left corner of the
    DIV. Rather it seem to push it down by a line height. Is there some
    white space sneaking into the DIV? How do I get the P right into the top
    left corner?

    Andrew Poulos
    Andrew Poulos, Dec 1, 2005
    #1
    1. Advertising

  2. Andrew Poulos

    RobG Guest

    Andrew Poulos wrote:
    > I'm building a DIV dynamically and putting a P into it like so:
    >
    > var oDiv = document.createElement("DIV");
    > var oP = document.createElement("P");
    > oP.style.backgroundColor = "green";


    oP.style.margin = '0';


    See below.

    [...]
    > The problem is that FF doesn't put the P in the top left corner of the
    > DIV. Rather it seem to push it down by a line height. Is there some
    > white space sneaking into the DIV? How do I get the P right into the top
    > left corner?


    The default stylesheet in Firefox puts a margin-top of 16px on P
    elements. You need to remove it, there are various ways, the above is
    just one.


    --
    Rob
    RobG, Dec 1, 2005
    #2
    1. Advertising

  3. "Andrew Poulos" <> schreef in bericht
    news:438eb1ee$0$8541$...
    > I'm building a DIV dynamically and putting a P into it like so:
    >
    > var oDiv = document.createElement("DIV");
    > var oP = document.createElement("P");
    > oP.style.backgroundColor = "green";
    > oP.appendChild( document.createTextNode("some sample text") );
    > oDiv.appendChild(oP);
    >
    > oDiv.style.position = "absolute";
    > oDiv.style.left = "100px";
    > oDiv.style.top = "100px";
    > oDiv.style.width = "200px";
    > oDiv.style.height = "150px";
    > oDiv.style.backgroundColor = "blue";
    >
    > document.body.appendChild(oDiv);
    >
    >
    > The problem is that FF doesn't put the P in the top left corner of the
    > DIV. Rather it seem to push it down by a line height. Is there some
    > white space sneaking into the DIV? How do I get the P right into the top
    > left corner?


    If I'm not misstaken the <P> tag has a default padding and margin attached
    to it. Does it help when you set at least the P's margin to zero before
    appending it?


    Patrick.
    --

    Patrick Kanne - Webmaniac
    petnews _AT_ quaint _DOT_ info
    http://patrick.quaint.info
    Patrick Kanne, Dec 1, 2005
    #3
  4. Andrew Poulos

    RobG Guest

    Duncan Booth wrote:
    > RobG wrote:
    >
    >
    >>The default stylesheet in Firefox puts a margin-top of 16px on P
    >>elements. You need to remove it, there are various ways, the above is
    >>just one.

    >
    >
    > The default is actually 1em, not 16px. In particular, if you specify a
    > different font-size for the P, or if the default font-size is changed, the
    > margin size will scale accordingly.


    I take your point that it is probably set in the stylesheet using em.
    But the underlying defaults are set in px and the initial setting in
    Firefox is 16px, so I guess you could argue that one to and fro.

    The bottom line is that the OP needs to set the margin.


    --
    Rob
    RobG, Dec 1, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    725
  2. Muhammad Adeel
    Replies:
    2
    Views:
    309
    Muhammad Adeel
    Aug 6, 2010
  3. Xavier Noria

    Time.local and offsets

    Xavier Noria, Aug 25, 2010, in forum: Ruby
    Replies:
    8
    Views:
    195
    Rick DeNatale
    Aug 31, 2010
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    176
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    296
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page