Table layout design issue in Firefox browser - html

Question

I have a table in my html page, in the table the first tr has images and next tr has text and it look's good in IE and Chrome browser's like this
but when I use in Firefox browser it looks like this:
I just used CSS (text-align:center) for td and (border-collapse: collapse,width: 100%) for table that's all...
My html code:
<table class="foottable" border="0" cellpadding="0" cellspacing="1">
<tr>
<td class="foottabcen"><img id="check" src="images/unchecked.png"/></td>
<td class="foottabcen"><img id="export" class="image1" src="images/excelicon.png" /></td>
<td class="foottabcen"><img id="test" class="image1" src="images/mailicon.png" /></td>
<td class="foottabcen"><img id="sms" class="image2" src="images/smsicon.png"/></td>
<td class="foottabcen"><img class="image1" src="images/charticon.png" /></td>
<td class="foottabcen"><img id="print" class="image1" src="images/printericon.png"/></td>
</tr>
<tr>
<td class="foottabcen">Select all</td>
<td class="foottabcen">Export to excel</td>
<td class="foottabcen">Mail</td>
<td class="foottabcen">SMS</td>
<td class="foottabcen">Graph</td>
<td class="foottabcen">Print</td>
</tr>
</table>
My CSS code:
.foottable
{
width: 100%;border-top: 2px solid #D4D4D4;border-collapse: collapse;background: white;
}
.foottabcen
{
color:black;text-align: center;
}
please help me.........

Answer 1

Not sure why you would want to do this way but I guess the better way would have been putting the image and text in the same td like:
<td>
<a href="#">
<span><img src="images/exl_icon.png" alt="" /></span>
<small>Export to excel</small>
</a>
</td> /* <a> is added considering these are clickable elements */
and apply display:block; to 'a', 'span' and 'small' through your css.
and probably the best way would have been just use text as link in the td and add a icon specific class to it:
<td>
Export to excel
</td>
and in your css it will look like this:
.ico_excel{
display:block;
text-align:center;
padding-top: x px; /* x should be more than the height of the icon */
background: transparent url(images/exl_icon.png) center top no-repeat;
}

Answer 2

try this
<table class="foottable" border="0" cellpadding="0" cellspacing="1">
<tr>
<td class="foottabcen"><img id="check" src="images/unchecked.png"/></td>
<td class="foottabcen"><img id="export" class="image1" src="images/excelicon.png" /></td>
<td class="foottabcen"><img id="test" class="image1" src="images/mailicon.png" /></td>
<td class="foottabcen"><img id="sms" class="image2" src="images/smsicon.png"/></td>
<td class="foottabcen"><img class="image1" src="images/charticon.png" /></td>
<td class="foottabcen"><img id="print" class="image1" src="images/printericon.png"/></td>
</tr>
<tr>
<td class="foottabcen1">Select all</td>
<td class="foottabcen1">Export to excel</td>
<td class="foottabcen1">Mail</td>
<td class="foottabcen1">SMS</td>
<td class="foottabcen1">Graph</td>
<td class="foottabcen1">Print</td>
</tr>
</table>
and css...give height for foottabcen as per ur requirement
.foottable
{
width: 100%;border-top: 2px solid #D4D4D4;border-collapse: collapse;
background: white;
}
.foottabcen
{
color:black;text-align: center;height:50px;
}
.foottabcen1
{
color:black;text-align: center;
}
check demo here..... http://jsfiddle.net/dBFfd/

Answer 3

did you try this...
<table>
<tr>
<td>
<img id="check" src="images/unchecked.png"/>
<span>sample</span>
</td>
</tr
</table>
but if you want my free assistant just email your code i try to fix it....