css displaying divs inside a Tr fine in FireFox, but IE increases the width of the row...

Question

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.

Answer 1

Why do you need the division? Just float the images themselves to the right. Like I've told a million other people, you can't use divisions inside a table without getting some adverse effects that you just can't fix, they're not meant to be there.

My guess is that right: -30px is being interpreted to add 30px to the right side to make room for it. Just floating the images to the right will be a much better solution though, and you can add a margin around them to space them properly.

Also, you are supposed to float anything to the right FIRST, not after the content. Most browsers will usually put content floated to the right on a new line if it's after the content, that is proper behavior. This is because by default a division will start a new line on its own, then it will be modified to float to the right, usually on the same new line it created already.

So yeah, there are a few different things that are causing problems. It's not one thing causing every problem, though.