cross-platform issues with a menu

first off, apologies for my first post being a relatively convoluted problem - i didn't know where else to turn!

i'm trying to make a horizontal css menu which displays a differently-coloured border under each menu item when rolled-over. i've tried a few techniques, and settled on one which work perfectly in opera 9.27 (for mac anyway) and any version of firefox i've tried it in. unfortunately, it falls to pieces in all versions of explorer, and that's all my client is interested in! here's the code:

html:

<div id="back" style='text-align:center; '>
<ul id='carl2' style='text-align:center; '>
			<li><a href="#" class="current">Our Company</a></li>
			<li><a href="#">Our Business</a></li>
			<li><a href="#">Conferences &amp; Events</a></li>
			<li><a href="#">Conferences &amp; Events</a></li>          
            <li><a href="#">Conferences &amp; Events</a></li>
            <li><a href="#">Conferences &amp; Events</a></li>
  </ul>
 
  </div>

and the css:

#back {
	width:960px;
	height:43px;
	margin:0 auto;
	background: url(<a href="http://img379.imageshack.us/img379/8845/menubgpu0.gif" rel="nofollow">http://img379.imageshack.us/img379/8845/menubgpu0.gif</a>);
	background-repeat: no-repeat;
}
 
#carl2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:.8em;
	width:960px;
	height:43px;
	margin:0 auto;
	margin: 0;
	padding: 0;
	display: inline;
	list-style-type: none;
}
 
    #carl2  a      {
	display:block;
	text-decoration: none;
	color:#666;
	width:160px;
	height:20px;
	margin:0;
	float:left;
	padding: 12px 0 0 0;
	border-bottom: 12px solid white;
}
  #carl2 a:hover {
	display:block;
	border: none;
	color:#999;
}
 
#carl2 a.current {
border-bottom: 0px solid white;
}

when i look at this in IE, the menu text falls down the page like a staircase from left to right, outside of the div it's contained in. that only started happening when i put the list inside a div though (which i did trying to solve a prior layout problem). so my questions are:

1) why is this happening? if anyone can answer just that i might be able to fix it myself.
2) can anyone think of a better way to get the effect i'm looking for? any examples? i can't find any css menus online that have a different-coloured hover for each item. maybe there's a good reason!

the next step is that i want a second level of list items, adding the functionality from this list:

http://www.coremediadesign.co.uk/tutorials/css_tabbed_navigation_1_sample.html

anyway, if anyone has any comments or help i'd be very grateful, even if your comment is "there's no way that's gonna work" or "clean up your code and come back".

thanks!