Firefox CSS проблема с высотой - PullRequest
Новая
       2

Firefox CSS проблема с высотой

0 голосов
/ 16 декабря 2009

Итак, у меня есть эта таблица http://mikepuerto.com/iNews/ -

Я использую некоторые jquery для сортировки. Если вы просматриваете это в любом браузере, кроме Firefox, вы увидите, что заголовки таблиц имеют тень вдоль нижней части, а когда вы щелкаете заголовок, стрелка указывает вниз, указывая, что вы сортируете этот столбец ... По какой-то причине Firefox не показать тень и правильно показывает стрелку ... Я сузил ее, чтобы что-то сделать с высотой на "й". С высотой и отступом в следующем стиле он отлично работает в большинстве других браузеров ... Он работает только в FF, если я установил высоту 69px; Любые идеи относительно того, почему это произойдет? 

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

Ответы [ 3 ]

2 голосов
/ 16 декабря 2009

Похоже, в FF это первая строка таблицы после того, как она скрывает это.

Вы можете исправить это, сделав в первой строке таблицы цвет фона, и, возможно, добавьте поле в верхнюю часть. Взгляну сейчас.

Высота действительно должна быть 70px, так как это высота фонового изображения. Заполнение не имеет эффекта в FF. В FF вкладки выглядят хорошо, тогда в других версиях вам просто нужно убедиться, что фон белый.

Измените ваш CSS на странице на этот padding-bottom, а padding-top просто не работает в FF из-за всех других стилей. 

            #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;
        }

В частности #fff как цвет фона для переопределения красного. 

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;
    }

А затем установите для него высоту 70px и установите только левое и правое поле. Если вы хотите заполнить верх и низ, вам придется обернуть их в промежуток или пойти другим путем. 

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

Теперь работает в FF, Chrome, IE и Safari.

Полная разметка 

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

таблицы $ (Документ) .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>

1 голос
/ 16 декабря 2009

Попробуйте установить 

background-position:bottom:

для правила table.interactiveData thead tr, которое следует за тем, которое вы опубликовали.

Редактировать: Также в следующем правиле вам это нужно (или удалите центрирование, которое там есть), так что все вместе, это то, что вам нужно: 

        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 */
        }
0 голосов
/ 16 декабря 2009

Это заполнение, которое обрабатывается по-разному. В Fx заполнение ячеек заголовка не влияет на размер ячейки, поэтому высота равна 54px.

Удалите настройку высоты в ячейках заголовка и укажите вместо нее высоту 70px.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...