I'm currently facing a challenge in understanding the issue at hand and finding a solution for it.
The problem arises from certain div elements containing icons that are affecting the width when presenting tabular data. Removing these divs resolves the width disparity (Refer to the Firefox example below).
Below is the desired view in Firefox where the icons' alignment is correctly positioned on the same y-coordinate: alt text http://www.redsandstech.com/ff_display.jpg
In contrast, here's the view in IE7 displaying the icons incorrectly along with the altered width of the table row: alt text http://www.redsandstech.com/ie_display.jpg
Provided HTML code:
<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>
CSS styles used:
.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;
}
Despite numerous attempts to adjust the CSS properties, I am still experimenting to find a suitable solution. Any suggestions or tips would be greatly appreciated.
Thank you in advance.