CSS help needed for old Wordpress/Twitter script that kills sidebar!

I'm trying to include this Twitter script on a Wordpress blog's sidebar. When I follow all of the directions, the script works beautifully, but it makes everything on the entire sidebar disappear, and I don't know why.

Here's the code for this script:

<!--BEGIN TWITTER BADGE -->
<script type="text/javascript">
  function relative_time(time_value) {
    var values = time_value.split(" ");
    time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
    var parsed_date = Date.parse(time_value);
    var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
    var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
    delta = delta + (relative_to.getTimezoneOffset() * 60);

    if (delta < 60) {
      return 'less than a minute ago';
    } else if(delta < 120) {
      return 'about a minute ago';
    } else if(delta < (45*60)) {
      return (parseInt(delta / 60)).toString() + ' minutes ago';
    } else if(delta < (90*60)) {
      return 'about an hour ago';
    } else if(delta < (24*60*60)) {
      return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
    } else if(delta < (48*60*60)) {
      return '1 day ago';
    } else {
      return (parseInt(delta / 86400)).toString() + ' days ago';
    }
  }
  
	function twitterCallback(obj) {
		var id = obj[0].user.id;
		document.getElementById('my_twitter_status').innerHTML = obj[0].text;
		document.getElementById('my_twitter_status_time').innerHTML = relative_time(obj[0].created_at);
	}
</script>
<div id="twitter_badge_container">
	<div id="twitter_badge_tl">
		<div id="twitter_badge_tr">
			<div id="twitter_badge_bl">
				<div id="twitter_badge_br">
					<div id="twitter_badge_inner">
						<span id="my_twitter_status"></span> <span id="my_twitter_status_time"></span><span id="twitter_badge_via"> <a href="http://twitter.com/">via twitter</a></span>
						<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/YOUR-TWITTER-USERNAME.json?callback=twitterCallback&count=1">
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--END TWITTER BADGE --> 

Code (markup):

...and here is the CSS:

#twitter_badge_container{width: 300px; background: #C1EAFF}
#twitter_badge_tl{background: transparent url(twitter_tl.png) top left no-repeat;}
#twitter_badge_tr{background: transparent url(twitter_tr.png) top right no-repeat;}
#twitter_badge_bl{background: transparent url(twitter_bl.png) bottom left no-repeat;}
#twitter_badge_br{background: transparent url(twitter_br.png) bottom right no-repeat; }
#twitter_badge_inner{padding: 45px 10px 10px 10px;}
#twitter_badge_via {font-size: 10px }
#twitter_badge_via a {color #666}

/* defaults */
#my_twitter_status{}
#my_twitter_status_time{color: #666; font-size: 10px;}

Code (markup):

I've tried including the 1st code snippet directly on the sidebar, then tried putting it in its own DIV, then even tried calling it from a PHP file. No matter what I do, it will wipe out every single thing being called on the sidebar once it's published.

As a CSS geek, can you see anything in this code that might be causing this issue?! Thanks in advance!

 

decrease the width in

#twitter_badge_container{width: 300px; background: #C1EAFF}

Code (markup):

 

Hmm, now it's preserving what's above it, but it's still killing both the right sidebar widgets, and the entire footer...

 

you must put zome z-index i think.

 

give me ur website url i will check it

 

sent, and thanks

 

Bhu wasn't able to solve it due to it being javascript, does anyone here know?

 

with all due respect, it would be easier for us to work with the link of the debug version of your site...