Dynamic DIV and P creation offsets the P

[Andrew Poulos]

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

 

[RobG]

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.

 

[Patrick Kanne]

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.

 

[RobG]

RobG wrote:




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.