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

Я создал шаблон, используя макет из 3 столбцов с использованием таблицы (в соответствии с советом, данным здесь). Затем я вставляю несколько вкладок пользовательского интерфейса jQuery в одну из ячеек. Однако содержимое других ячеек смещено заголовком вкладок. Я совершенно озадачен тем, что происходит, и не могу проследить, откуда это смещение, с помощью Firebug или как сместить вертикальное положение содержимого в других ячейках.

        <table>
            <tr>
                <td id="left" class="ui-content-widget ui-corner-all">
                    <p>Left</p>
                </td>
                <td id="middle" class="ui-content-widget ui-corner-all">
                    <p>Lorem ipsum... </p>
                </td>
                <td id="right" class="ui-content-widget ui-corner-all">
                    <ul>
                            <li> <a href="#Tabs-Tab1">Tab1</a></li>
                            <li> <a href="#Tabs-Tab2">Tab2</a></li>
                    </ul>
                    <div id="Tabs-Tab1">
                        <p>Nunc volutpat ... </p>
                    </div>
                    <div id="Tabs-Tab2">
                        <p>Lorem ipsum ... </p>
                    </div>
                </td>
            </tr>
        </table>

Есть какие нибудь идеи как это починить? Вот сайт с этой проблемой.


css jquery-ui jquery-ui-tabs
person Evan Siroky    schedule 12.04.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

В Resets.css вы можете установить вертикальное выравнивание по «верху» вместо «базовой линии».

vertical-align: top;
person H6.    schedule 12.04.2011

arrow_upward
0
arrow_downward

Ваша настоящая проблема в следующем:

.ui-helper-clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

И, в частности, clear:both;. Попробуйте изменить технику clearfix:

#right .ui-helper-clearfix {
    clear: none;
    overflow: hidden;
}

Этот вопрос начинает выглядеть примерно так: Макет CSS: 2 столбца с фиксированной жидкостью (снова)

person mu is too short    schedule 12.04.2011