Clone's Class addition is ineffective

I have a clone function that clones an object on doubleclick. I also have a .addclass('Copy') added to these clones. However, the css property isn't being applied properly.

Consider that i have a Block1. I have a duplicate of Block1, Block2, supplied in my html document. Block2 has the class .Copy, and it applies properly. (.copy moves the duplicate to the left by a certain amount.) These automatically generated clones have the class, but the margin property of the class isn't being respected. .Copy has a margin-left: -100px. The clones are visibly not moved to the side by this much, but rather an odd amount like 82%开发者_运维百科 of whatever i set. The duplicates that i provided manually in the html with the .Copy class, are off to the side by 100px.

$(document).ready(function(){
    $("img:not('.Copy, .Show_Card')").live('dblclick', function(){
        var limit = $(this).parent().size();
        if (limit < 4) {
            var $clone = $(this).clone(true).addClass('Copy');
            $(this).parent().find('.DCT_Card:last').before($clone);
        }
    });
});

These img clones do have a border set to them, which i thought might have been causing some issues. So i removed the border property and that fixed the odd spacing. So is there a way to relayer the css effects?

Use insertBefore() instead of before()

$('div').clone().addClass('back').insertBefore('div').eq(0); // 0 represent first div

http://jsfiddle.net/TjxBL/2/