css displaying divs inside a Tr fine in FireFox, but IE increases the width of the row...
- by Ronedog
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.
