DOM created image expected position shifts

[Andrew Poulos]

On window load I'm running some javascript to add an image to a DIV. The
image is being added/created but it is about 18 or so pixels further
down the screen than expected. If I code the IMG tag, including a style
attribute, directly into the DIV's HTML the image displays where I
expect it to i.e. in the top left corner.

Is there something about DOM methods that affects positioning or is
there something else I've missed?


The relevant js looks like this:

if (document.getElementById("up")) {
myimg = document.createElement("IMG");
} else {
return;
}
document.getElementById("up").appendChild(myimg);
myimg.src = "q.png";
myimg.style.position = "absolute";


The relevant HTML is simply this:

<div id="up" style="position:absolute; left:40px; top:40px; width:600px;
height:80px;>
</div>


Andrew Poulos

 

[VK]

Your code works just fine for me under IE 6.0 and Firefox 1.0.4 (which
is your browser? I guess by posting props). There must be someting else
in the outer code.

 

[Martin Honnen]

On window load I'm running some javascript to add an image to a DIV. The
image is being added/created but it is about 18 or so pixels further
down the screen than expected. If I code the IMG tag, including a style
attribute, directly into the DIV's HTML the image displays where I
expect it to i.e. in the top left corner.

Is there something about DOM methods that affects positioning or is
there something else I've missed?

Perhpaps there are other child nodes already in the <div> so that you
should better use
divElement.insertBefore(myimg, divElement.firstChild);
if you want to make sure the image sits as the first element.
If you don't specify left/top on the absolutely positioned <img> then it
takes its place in the normal flow thus if there are any child nodes
before it it can end up below the top left corner.