I'm having some difficulty figuring out what is going on and how to fix it.

I have some divs that contain some icons that are causing a width problem when displaying tabular data. If I remove the div's that contain the icons, the row width ends up the way I want it (See the firefox example below).

Here's the view in Firefox which is what I want (notice the positioning of the icons circled in red, which is aligned on the same y coordinate, or thereabouts):

Here's the view in IE7 (Notice what happens to the icons and the width of the grey line, which is the table row):

Here's the HTML:

<table>
 <tbody>
  <tr>
    <td>
        <span>stuff 1</span>
        <span>stuff 2</span>
        <div class="prop_edit"><img class="img_height14" src="edit.jpg"></div>
        <div class="prop_archive"><img class="img_height14" src="archive.jpg"></div>
        <div class="prop_delete"><img class="img_height14" src="delete.jpg"></div>
        <div style="display:none;"> 
             <div>Links Here</div>
        </div>
     </td>
  </tr>
</tbody>

Heres the CSS:

.prop_edit{
float:right;
position: relative;
top: 0px;
right:50px; 

}
.prop_archive{
    float:right;
    position: relative;
    top: 0px;
    right:10px;
}
.prop_delete{
    float:right;
    position: relative;
    top: 0px;
    right: -30px;
}
.img_height14{
    height:14px;
    vertical-align:top;
    position:relative;
}

I've tried a bunch of different css things, but really am just hacking away hoping to figure something out. Anyone got some tips that could help me?

Thanks in advance.