1

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

enter image description here

but when I use in Firefox browser it looks like this:

enter image description here

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"><a href="admin_chart.jsp" id="graph"><img class="image1" src="images/charticon.png" /></a></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.........

3
  • Have you tried debugging it via Right click > "Inspect element" in Firefox? If you check the styles applied, this may give you more information.
    – Aiias
    Mar 30, 2013 at 7:17
  • Give the fix height for TD...... Mar 30, 2013 at 7:21
  • 1
    now see it i have did some changes
    – Kumar
    Mar 30, 2013 at 7:29

3 Answers 3

2

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>
 <a href="#" class="ico_excel">Export to excel</a>
</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;
    }
2
  • but i need the a tag only for graph and for design alignment i used two tr in table
    – Kumar
    Mar 30, 2013 at 7:49
  • You can remove <a> tags wherever they aren't required in first example and replace it by span in the second example. Mar 30, 2013 at 7:54
1

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"><a href="admin_chart.jsp" id="graph"><img class="image1" src="images/charticon.png" /></a></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/

2
  • check in demo ...and give different height as your requirement Mar 30, 2013 at 8:00
  • what problem giving next tr Mar 30, 2013 at 8:05
1

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....

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.