테이블에서 div로 이제 막 넘어가려고 하는중인데요.
막히는 부분이 적지않습니다.
익스에선 정확하게 나타나는데
파폭에서는 앞에 40px의 공백이 생깁니다.
지금 2시간째 고통을 격고있습니다.
설명좀 부탁합니다...

<style>
 #colorbar{
 float:left;
 padding:0px;
 margin:0px;
 background:#F00;
 text-align:center;
 }
#colorbar ul{margin:0px;}
.ir span{overflow:hidden;position:relative;z-index:-1;font-size:11px;}
#colorbar li{float:left;display: inline;margin:0px;}
#colorbar #spage{float:left;width:18px; height:18px;}
#colorbar li a{float:left; text-decoration:none;display:block;background:url(http://img.sir.co.kr/v14/gnuboard4/menubar_right.gif) no-repeat;}

</style>
<div id="colorbar">
 <ul>
  <li><a id="spage" class="spage1 ir" href="#"><span>1</span></A></li>
  <li><a id="spage" class="spage2 ir" href="#"><span>2</span></A></li>
  <li><a id="spage" class="spage3 ir" href="#"><span>3</span></A></li>
  <li><a id="spage" class="spage4 ir" href="#"><span>4</span></A></li>
  <li><a id="spage" class="spage5 ir" href="#"><span>5</span></A></li>
  <li><a id="spage" class="spage6 ir" href="#"><span>6</span></A></li>
  <li><a id="spage" class="spage7 ir" href="#"><span>7</span></A></li>
 </ul>
</div>
</div>