CSS igen nytt problem

Det verkar som det är alltid något browser som vill strula med något när man använder CSS inget funkar felfritt om man inte gör en massa specialare för att det ska funka i alla browsers. Innan hatade jag firefox och nu strular explorer men som jag förstår är det jag som inte kan css tillräkligt bra för att kunna gå runt alla små klurigheter som uppstår. Kan någon som är en snäll själ kolla på det här för jag fattar verkligen inte vad som händer. Tanken är att fliken ska åka upp lite när man för musen över. och det gör den på alla men i explorer blir det något helt skumt som är lite svårt att förklara men kolla in bilden så fattar ni nog vad som händer.

http://www.tkingdom.net/test/test.jpg

Kan tyvärr inte lägga ut sidan
mvh stavve

css

   
#tabsB {
      float:left;
      width:100%;
      font-size:93%;
      line-height:normal;
      }
    #tabsB ul {
	  margin:0 auto;
	  padding:10px 10px 0 1px;
	  list-style:none;
      }
    #tabsB li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsB a {
      float:left;
      background:url(../images/round/tableftJ.png) no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsB a span {
      float:left;
      display:block;
      background:url(../images/round/tabrightJ.png) no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#667;
      }
 
    #tabsB a:hover {
      background-position:0% 2px;
      }
    #tabsB a:hover span {
      background-position:100% 2px;
      }

<td>
										<div id="tabsB">
										<ul>
											<li><a href="#" title="Link 1"><span>Link</span></a></li>
											<li><a href="#" title="Link 2"><span>Link</span></a></li>
											<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
											<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
										</ul>
										</div>
								</td>