ansaurus

Question

Answer 1

+1 A:

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"&gt;

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>

Ryan Christensen 2009-12-16 03:49:50

i didn't write the included "styles.css" ;) just the stuff in the html. i'm handing it off to someone else.....

mike 2009-12-16 04:05:08

Answer 2

A:

It's the padding that is handled differently. In Fx the padding on the header cells doesn't affect the size of the cell, so the height is the specified 54px.

Remove the height setting on the header cells, and specify the height 70px on the row instead.

Guffa 2009-12-16 03:54:25

Answer 3

+1 A:

Try setting the

background-position:bottom:

on the table.interactiveData thead tr rule which follows the one you posted.

Edit: Also on the next rule you need that (or remove the centering that is there), so all together, this is what you need:

        table.interactiveData thead tr {
            cursor: pointer;
            background: url(images/thead-bg.jpg);
            background-position:bottom;
            background-repeat:repeat-x;
        }
        table.interactiveData thead tr .headerSortDown, 
        table.interactiveData thead tr .headerSortUp {
            background: url(images/thead-hover-bg.jpg) center bottom no-repeat; 
            /* changed to "center bottom", thanks Ryan */
        }

Tor Valamo 2009-12-16 04:14:16

This is the best solution. I thought it was bottom positioned already. Even more simple is these two lines background: url(mikepuerto.com/iNews/images/…) center bottom no-repeat; background: url(mikepuerto.com/iNews/images/thead-bg.jpg) bottom; instead of center.

Ryan Christensen 2009-12-16 04:24:56

I generally don't like shortcut attributes that have fields which share the same value set, since you don't know which field is for which style by looking at it without knowing the answer from before. But I used it here now because it was in the original code.

Tor Valamo 2009-12-16 04:47:16

ansaurus

tags:

views:

answers:

Firefox CSS height issue...

related questions