CSS - 將圖像設置爲div

我有手風琴，手風琴（jqueryui）裏面有一張表，它有一些值。這些值將被插入，並基於這些值，我將爲其分配一個彩色框。例如，低於30％的紅色和高於80％的綠色。我想在圖像中分配圖像。所以在Javascript中，我可以動態插入一個類，例如redBox和div獲取該圖像。CSS - 將圖像設置爲div

出於某種原因，我無法弄清楚......圖像彼此重疊...例如，最後一個div有一個紅色的分配，第一個綠色。紅色代替。

這是HTML：

<div style="height:20px;overflow:visible" id="networkingIndexCollapsible" class="accordionmodsindexing"> 
     <h3 style="text-align: right"> <span id="scenarioIndex">Some data</span></h3> 
      <div>       

       <table class="indexingOptions" > 
        <tr> 
           <td>Networking Index:</td> 
           <td><div id="netIndex">Some data<div id="netIndexSquare" class="greenSquare"></div></div></td> 
           </tr> 
           <tr> 
           <td>- Supplier Index:</td> 
           <td><div id="suppIndex">Some data<div id="supIndexSquare" class="greenSquare"></div></div></td> 
           </tr> 
           <tr> 
           <td>- Deliver Index:</td> 
           <td><div id="delIndex">Some data<div id="delIndexSquare" class="redSquare"></div></div></td> 
           </tr> 
           <tr> 
           <td>- Product Index:</td> 
           <td><div id="proIndex">Some data<div id="proIndexSquare" class="redSquare"></div></div></td> 
           </tr> 
         </table> 
      </div> 
     </div> 
<div> I am just an empty div</div>

這是CSS：

.redSquare 
{ 
display: inline!important; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
background: url(../img/redsquare.png) no-repeat; 
height: 20px; 
padding-left: 55px; 
float: right; 
top: 10px; 
left: 209px; 
position: absolute; 
} 
.greenSquare 
{ 
display: inline!important; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
background: url(../img/greensquare.png) no-repeat; 
height: 20px; 
padding-left: 55px; 
float: right; 
top: 10px; 
left: 209px; 
position: absolute; 
} 
.orangeSquare 
    { 
display: inline!important; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
background: url(../img/orangesquare.png) no-repeat; 
height: 20px; 
padding-left: 55px; 
float: right; 
top: 10px; 
left: 209px; 
position: absolute; 
}

圖像是8x8px大。

附上的圖片顯示我面臨的問題。表中設置了綠色，綠色，紅色和讀取，但只顯示紅色。我不是那麼好的CSS，對於愚蠢的問題感到抱歉。