...

View Full Version : insertBefore and lost vertical space



queshaw
06-06-2004, 11:27 PM
Hi,

I find that if I have something like:



<div><p id="p1">asdf</p><p id="p2">fdsa</p><p id="p3">sdaf</p></div>

and I want to move p3 (pr p2) before p1. If I:



var p2 = document.getElementById("p3"); // or p2
var clone = p2.cloneNode(true);
var p1 = document.getElementById("p1");
p1.parentNode.removeChild(p2);
p1.parentNode.insertBefore(clone,p1);

It effectively moves p3 before p1, but the rendered vertical space between p3 and p1 is now lost.

This only happens for me when I am inserting before the firstChild. The problem (assuming this is a bug) doesn't happen in IE6, but it does in mozilla 1.7B on linux (gecko 20040316) and firefox 0.8 on linux and winxp.

I can workaround the problem by creating an element and using replaceChild to replace it with the cloned one:



var p2 = document.getElementById("p3");
var clone = p2.cloneNode(true);
var p1 = document.getElementById("p1");
p1.parentNode.removeChild(p2);
var tmp = p1.parentNode.insertBefore(document.createElement("p"), p1);
p1.parentNode.replaceChild(clone,tmp);

Or, the first bit of clode works as I would expect (i.e. vertical space between p3 and p1 appears the same as it was between p1 and p2), if I have in CSS:



div { padding-top: 1px }

Is it a bug? Advice?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum