Здравствуйте, вопрос по верстке.
делаю изображение горизонтальной стрелки, состоящей из квадратиков. Основание стрелки получается нормально, а "наконечник" "уезжает" при изменении масштаба окна. Вот код:

  <style type="text/css">
   
   #arrow {
   margin-top:-20px;
   margin-left:112px
   }
       
   #arrow li {
   display:inline;
   margin-left:-3px;
   }
 
   
   #arrow_arrow_top {
   margin-top:-36px;
   margin-left:124px
   }
   
   #arrow_arrow_top li {
   display:inline;
   margin-left:-4px;
   }
   
   .top_top {
   margin-bottom:2px;
   }
   
   .top_middle {
   margin-bottom:1px;
   }
 
 
   #arrow_arrow_bottom {
   margin-top:-33px;
   margin-left:124px
   }
   
   #arrow_arrow_bottom li {
   display:inline;
   margin-left:-4px;
   }
   
   .bottom_bottom {
   margin-bottom:-2px;
   }
   
   .bottom_middle {
   margin-bottom:-1px;
   }
   </style>
 
 
 
 
 
 
   <div>
<!--основание стрелки, "arrow_square.gif" здесь и далее - изображение квадратика, из которых состоит стрелка -->  
   <ul id="arrow">
   <li><img src="/images/arrow_square.gif" /></li>
   <li><img src="/images/arrow_square.gif" /></li>
   <li><img src="/images/arrow_square.gif" /></li>
   <li><img src="/images/arrow_square.gif" /></li>
   <li><img src="/images/arrow_square.gif" /></li>
   <li><img src="/images/arrow_square.gif" /></li>
   <li><img src="/images/arrow_square.gif" /></li>
   <li><img src="/images/arrow_square.gif" /></li>
   </ul>
<!--/основание стрелки-->
 
<!--верхняя часть наконечника стрелки-->  
   <ul id="arrow_arrow_top">
   <li><img class="top_top" src="/images/arrow_square.gif" /></li>
   <li><img class="top_middle" src="/images/arrow_square.gif" /></li>
   <li><img class="top_bottom" src="/images/arrow_square.gif" /></li>
   </ul>
<!--/верхняя часть наконечника стрелки-->  
 
<!--нижняя часть наконечника стрелки-->
   <ul id="arrow_arrow_bottom">
   <li><img class="bottom_bottom" src="/images/arrow_square.gif" /></li>
   <li><img class="bottom_middle" src="/images/arrow_square.gif" /></li>
   <li><img class="bottom_top" src="/images/arrow_square.gif" /></li>
   </ul>
<!--/нижняя часть наконечника стрелки-->  
   </div>

Подскажите пожалуйста, как это можно исправить?