setAttribute() not working?
===

I'm trying to add a couple of navigation "panes" to Shadowbox on [my site][1].  I found the following bit of code to do so, which is working but relies on quite a bit of inline CSS.  I'm attempting to move this out to shadowbox.css, but I can't seem to get that to work.  Here's the code:

    var cssNavButtons = {cursor:"pointer", position:"absolute", width:200, height:"100%", top:0, "z-index":400};
    var navBtnRight = $("<div/>").css(cssNavButtons).css({right: 0, background:"url('images/nav-right.png') center center no-repeat"}).click(function(){Shadowbox.next();});
    var navBtnLeft = $("<div/>").css(cssNavButtons).css({left: 0, background:"url('images/nav-left.png') center center no-repeat"}).click(function(){Shadowbox.previous();});
    $("#sb-body-inner").prepend(navBtnRight).prepend(navBtnLeft);

I have tried to set the vars navBtnRight and navBtnLeft to use the external CSS file like so, to no avail:

    var navBtnRight = $("<div/>").setAttribute("class","sb-bignav").setAttribute("id","sb-bignav-right").click(function(){Shadowbox.next();});

Can anyone let me know why this wouldn't work?  Thanks!

  [1]: http://www.element17.com/