Tabbed Navigation Help

Hello, I'm trying to make a jquery/CSS tabbed navigation, the sort you see at all sorts of web 2.0 blogs and websites. I've managed to make the whole thing work, but I can't manage to style it. You can see the thing in action at www.sharkyx.info (my testing domain), right at the bottom, in the footer. I'd really appreciate some help with this . Here's the code

Footer code:

<div class="menu tabbed">
	<ul class="tabs">
	<li class="t1"><a class="t1 tab" title="<?php _e('Latest Headlines'); ?>"><?php _e('Latest'); ?></a></li>
	<li class="t2"><a class="t2 tab" title="<?php _e('Popular Stories'); ?>"><?php _e('Popular'); ?></a></li>
	<li class="t3"><a class="t3 tab" title="<?php _e('Sections'); ?>"><?php _e('Sections'); ?></a></li>
	<li class="t4"><a class="t4 tab" title="<?php _e('Archives'); ?>"><?php _e('Archives'); ?></a></li>
	</ul>

	<!-- LATEST HEADLINES -->
	<div class="t1">
	<?php rewind_posts(); ?>
	<ul class="latest">
	<?php $posts = query_posts('showposts=10&offset=0'); foreach ($posts as $post): setup_postdata($post); ?>
	<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
	<?php endforeach; ?>
	</ul>
	</div>

	<!-- POPULAR (MOST COMMENTED POSTS) -->
	<div class="t2">
	<ul class="popular">
	<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 10");
	foreach ($result as $topten) {
	$postid = $topten->ID;
	$title = $topten->post_title;
	$commentcount = $topten->comment_count; 
	if ($commentcount != 0) { ?>
	<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>"><?php echo $title ?></a></li>
	<?php } } ?> 
	</ul>
	</div>

	<!-- SECTIONS (CATEGORIES) -->
	<div class="t3">
	<ul id="categories">
	<?php wp_list_categories('sort_column=name&optioncount=1&hierarchical=0&offset=5&title_li='); ?>
	</ul>
	</div>

	<!-- ARCHIVES -->
	<div class="t4">
	<ul id="archives">
	<?php wp_get_archives('type=monthly&limit=10'); ?>
	</ul>
	</div>

</div><!-- tabbed -->

Code (markup):

CSS:

/* SIDEBAR TABS */
.tabbed ul.tabs {
	float: left;
	display: inline;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #fff;
	}
.tabbed ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	background: #fff;
	}
.tabbed ul.tabs li a {
	width: auto;
	float: left;
	overflow: hidden;
	border: none;
	display: block;
	background: #ccc;
	margin: 0 2px 0 0;
	padding: 10px 12px;
	}
.tabbed ul.tabs li a:hover {
	background: #eee;
	}
.tabbed ul.tabs li a.tab-current {
	background: #f7f7f7;
	}
.tabbed div {
	float: left;
	display: block;
	width: 100%;
	margin: 0;
	padding: 5px 0;
	}
.tabbed div.t2, .tabbed div.t3, .tabbed div.t4 { display: none; }

Code (markup):

 

validate it strict

 

I found a quick fix, but since the error on the tabs is a firefox issue, the fix works only in firefox and causes issues with IE.. go figure

/* SIDEBAR TABS */
.tabbed ul.tabs {
    width: 290px;
	float: left;
	display: inline;
	margin: 0;
	padding: 0;
	background: #fff;
	}

.tabbed ul.tabs li a {
	width: auto;
	float: left;
	overflow: hidden;
	border: 0;
	display: block;
	background: #ccc;
    margin-left: -15px;
	padding: 10px 5px 5px 5px;
	}
.tabbed ul.tabs li a:hover {
	background: #eee;
	}
.tabbed ul.tabs li a.tab-current {
	background: #f7f7f7;
	}
.tabbed div {
	float: left;
	display: block;
    width: 290px;
	}
.tabbed div.t2, .tabbed div.t3, .tabbed div.t4 { display: none; width: 290px;}
.tabbed div.t1 { width: 290px;}

Code (markup):

As said above, it's a quick fix... and is ineffective since it doesnt work in IE.