Question

Looking at this image might make things clear..

FIDDLE

The main container is a div in which there are 5 more div’s each of them holding some data.

If the count for that data is 0 then , just display the text .
If the count is greater than 0 , then shown count and image nested inside a span and the image and number are clickable…

The second image is to show how the text inside the div is being rendered..

Because of the image in the 3rd and the 5th div’s the gap between the div’s is not being consistent . Even after setting the image to position:relative and position:absolute , setting the left and top property seems to have no affect ..

Can someone help me out in this context ..

HTML

<div id="prop">
   <div id="lvl1" class="alrt">
      Missing reads within 1 week : <span data-tr="1">0</span>
   </div>
   <div id="lvl2" class="alrt">
      Latest reads 1 Week or older : <span data-tr="2">0</span>
   </div>
   <div id="lvl3" class="alrt">
      Occupied Zero Consumption : <span data-tr="3"><a>39 <img src="../icon1.png" title="" /></a></span>
   </div>
   <div id="lvl4" class="alrt">
      Negative Consumption : <span data-tr="4">0</span>
   </div>
   <div id="lvl5" class="alrt">
      Vacant Consumption: <span data-tr="5"><a>5 <img src="../icon2.png" title="" /></a></span>
   </div>
   <div class="msg">
      *all alerts are based on yesterdays reads
   </div>
</div>

CSS

#prop
{
    height:55%;
    padding-top:10px;
    border:solid 2px #B2CD48;
    border-radius:10px;
    margin:10px 0 10px 15px;
}

#prop > .alrt 
{
    width:80%;
    float:right;
    height:12%;
    font-weight:700;
    font-size:1em;
    color:#42456B;
    padding:3px;
}

.alrt a 
{
    cursor:pointer;
    position:relative;
}

.alrt > span > a > img 
{
    width:20px;
    height:20px;
    position:relative;
    top:3px;
}

Answer 1

Try using this for .alrt > span > a > img

.alrt > span > a > img
{
    width: 20px;
    height: 20px;
    position: absolute;
    top: -3px;
}