I am displaying a grid in an IFrame on my homepage. The grid uses a CSS file to define design for rows, columns, header & footer.
Below is the image of the grid. In the footer, you can see the page navigation links.
The problem is that this footer is displayed on IE, but it is invisible in all the other browsers. What changes I need to do in this CSS code:
body { font: 0.8em Arial; }
/* Datagrid Table */
table.tbl { width:100%; border: 2px solid #94DEFA; font-size: 0.9em; clear: both; }
table.tbl tr td:first-child { display: none; }
/*td.tbl-header { background: url(/images/head_bg.gif); text-align: center; padding: 3px; font-weight: bold; border-bottom: 2px solid #c3daf9; }*/
td.tbl-header { background-color:#94DEFA; text-align: center; padding: 3px; font-weight: bold; border-bottom: 2px solid #c3daf9; }
tr.tbl-footer {}
table.tbl-footer {display:table-row; font-size: 1em;}
tr.tbl-row {height: 40px}
tr.tbl-row:hover { background: #EBFFFF; cursor: pointer; } /* Old color: #E9E9E9 */
tr.tbl-row-even { background: #F5F9FF; }
tr.tbl-row-odd { background: #FFFFFF; }
tr.tbl-row-highlight:hover { background: lightblue; cursor: pointer; }
td.tbl-nav { background: url(/images/head_bg.gif); height: 20px; border-top: 2px solid #c3daf9; color: #4D4D4D; }
/*td.tbl-nav { background-color:#c3daf9; height: 20px; border-top: 2px solid #c3daf9; color: #4D4D4D; }*/
/*td.tbl-nav { background-color:white; height: 20px; border-top: 2px solid #c3daf9; color: #4D4D4D; }*/
td.tbl-pages { text-align: center; }
td.tbl-row-num { text-align: right; }
td.tbl-cell {}
td.tbl-controls { text-align: center; }
td.tbl-found {}
td.tbl-checkall {}
td.tbl-page { text-align: right; }
td.tbl-noresults { font-weight: bold; color: #9F0000; height: 45px; text-align: center; }
span.tbl-reset { margin: 5px 5px; }
img.tbl-reset-image { margin-right: 5px; border: 0; }
span.tbl-create { margin: 5px 0; }
img.tbl-create-image { margin-right: 5px; border: 0; }
div.tbl-filter-box {}
img.tbl-arrows { border: 0; }
img.tbl-order-image { margin: 0 2px; border: 0; }
img.tbl-filter-image { border: 0; }
img.tbl-control-image { border: 0; }
span.page-selected { color: black; font-weight: bold; }
input.tbl-checkbox {}