Home/ Questions/Q 497795
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T05:48:57+00:00

So I have this table http://mikepuerto.com/iNews/ – I’m using some jquery to sort it.

  • 0

So I have this table http://mikepuerto.com/iNews/ –

I’m using some jquery to sort it. If you view this in any browser but firefox you will see that the table headers have a shadow running along the bottom and when you click a header an arrow points down to indicate that you are sorting that column… For some reason firefox does not show the shadow and does show the arrow properly… I have narrowed it down to something to do with the height on the “th”. With the height and padding on the following style it works fine on most other browsers… It only works in FF if i set the height to 69px; Any ideas as to why this would happen? 

table.interactiveData thead tr th {
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 0 7px 16px 7px;
    height: 54px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Looks like in FF it is the first table row after the th that is covering it up.

    You could fix by making the first row of the table to not have a background color and add a margin to the top of it maybe. Taking a look now.

    The height really should be 70px since that is the height of the background image. Padding is not having an effect in FF. In FF the tabs look good, then in the other versions you just need to make sure the background is white.

    Change your css in the page to this padding-bottom and padding-top is just not working in FF due to all the other styles.

                #slim {
            width: 580px;
            margin: 0 auto;
        }
        /* tables */
        table.interactiveData {
            font-family: "Lucida Grande", "Tahoma", "Franklin Gothic Medium", "Arial", Sans-serif;
            background-color: ;
            margin:10px 0pt 15px;
            font-size: 10px;
            width: 100%;
            text-align: left;
            border: 1px solid #dbdbdd;
        }

        table.interactiveData thead tr {
            cursor: pointer;
            background: url(http://mikepuerto.com/iNews/images/thead-bg.jpg);
        }
        table.interactiveData thead tr .headerSortDown, table.interactiveData thead tr .headerSortUp {
            background: #fff url(http://mikepuerto.com/iNews/images/thead-hover-bg.jpg) center center no-repeat;
        }
        table.interactiveData tbody td {
             padding: 7px;
            vertical-align: middle;
        }
        table.interactiveData td.even {
        }
        table.interactiveData tr.odd {
            background-color: #f3f3f3;
        }
        table.interactiveData td.sortedeven {
            background-color:#edf8fa;        
        }

        table.interactiveData td.sortedodd {
            background-color:#edf1f2;            
        }
        table.interactiveData thead tr th {
            color: #fff;
            font-size: 10px;
            font-weight: bold;
            height: 70px;
    padding-left: 5px;
    padding-right: 5px;
        }

    Specifically the #fff as the background color to override the red.

    table.interactiveData thead tr .headerSortDown, table.interactiveData thead tr .headerSortUp {
        background: #fff url(http://mikepuerto.com/iNews/images/thead-hover-bg.jpg) center center no-repeat;
    }

    And then set it to 70px height and only set a left and right margin. If you want to pad top and bottom you will have to wrap them in a span or go another route.

    table.interactiveData thead tr th {
            color: #fff;
            font-size: 10px;
            font-weight: bold;
            height: 70px;
    padding-left: 5px;
    padding-right: 5px;
        }

    Works in FF, Chrome, IE and Safari now.

    Full markup

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    tables

    $(document).ready(
    function() {
    $(“#interactiveData”).tablesorter({widgets: [‘zebra’,’columnHighlight’]});
    }

                );
    </script>

    <link rel="stylesheet" href="styles.css" />
    <style>
        #slim {
            width: 580px;
            margin: 0 auto;
        }
        /* tables */
        table.interactiveData {
            font-family: "Lucida Grande", "Tahoma", "Franklin Gothic Medium", "Arial", Sans-serif;
            background-color: ;
            margin:10px 0pt 15px;
            font-size: 10px;
            width: 100%;
            text-align: left;
            border: 1px solid #dbdbdd;
        }

        table.interactiveData thead tr {
            cursor: pointer;
            background: url(http://mikepuerto.com/iNews/images/thead-bg.jpg);
        }
        table.interactiveData thead tr .headerSortDown, table.interactiveData thead tr .headerSortUp {
            background: #fff url(http://mikepuerto.com/iNews/images/thead-hover-bg.jpg) center center no-repeat;
        }
        table.interactiveData tbody td {
             padding: 7px;
            vertical-align: middle;
        }
        table.interactiveData td.even {
        }
        table.interactiveData tr.odd {
            background-color: #f3f3f3;
        }
        table.interactiveData td.sortedeven {
            background-color:#edf8fa;        
        }

        table.interactiveData td.sortedodd {
            background-color:#edf1f2;            
        }
        table.interactiveData thead tr th {
            color: #fff;
            font-size: 10px;
            font-weight: bold;
            height: 70px;
    padding-left: 5px;
    padding-right: 5px;
        }

    </style>
</head>
<body>
    <div id="slim">
    <table id="interactiveData" class="interactiveData" border="0" cellpadding="0" cellspacing="0">
        <thead>
            <tr>

                <th>Rank</th>
                <th>Broker-Dealer</th>
                <th>Website</th>
                <th>Discretionary Assets</th>
                <th>Discretionary Assets 2007</th>
                <th>Difference in Discretionary Assets 2007-2009</th>

            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>data2b
                    <ul>
                        <li>item1</li>

                        <li>item2</li>
                        <li>item3</li>
                    </ul>
                </td>
                <td>1</td>
                <td>data4d</td>
                <td>data5e</td>

                <td>data5e</td>
            </tr>
            <tr>
                <td>2</td>
                <td>
                    data1f
                    <ul>
                        <li>item1</li>

                        <li>item2</li>
                        <li>item3</li>
                    </ul>
                </td>
                <td>data2g</td>
                <td>data3h</td>
                <td>data4i</td>

                <td>data4i</td>
            </tr>
            <tr>
                <td>3</td>
                <td>data2l
                    <ul>
                        <li>item1</li>
                        <li>item2</li>

                        <li>item3</li>
                    </ul>
                </td>
                <td>data3m</td>
                <td>data4n</td>
                <td>data5o</td>
                <td>data5o</td>

            </tr>
            <tr>
                <td>4</td>
                <td>data2q
                     <ul>
                        <li>item1</li>
                        <li>item2</li>
                        <li>item3</li>

                    </ul>                   
                </td>
                <td>data3r</td>
                <td>data4s</td>
                <td>data5t</td>
                <td>data5t</td>
            </tr>

            <tr>
                <td>5</td>
                <td>data2q
                    <ul>
                        <li>item1</li>
                        <li>item2</li>
                        <li>item3</li>

                    </ul>
                </td>
                <td>data3r</td>
                <td>data4s</td>
                <td>data5t</td>
                <td>data5t</td>
            </tr>

            <tr>
                <td>6</td>
                <td>data2q
                    <ul>
                        <li>item1</li>
                        <li>item2</li>
                        <li>item3</li>

                    </ul>
                </td>
                <td>data3r</td>
                <td>data4s</td>
                <td>data5t</td>
                <td>data5t</td>
            </tr>

        </tbody>
    </table>
    </div>
</body>

    • 0