Косяк с Tabs в Jquery UI

[SlashMan]

Доброго времени суток.

Слетают табы если запихиваю содержащий их div в таблицу, например:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Первый</a></li>
        <li><a href="#tabs-2">Second</a></li>
        <li><a href="#tabs-3">Third</a></li>
    </ul>
   <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<button id="button1">Button</button></div>
   <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
    <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>

Так все работает нормально. А если так:

<table align="center">
<tr><td>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Первый</a></li>
        <li><a href="#tabs-2">Second</a></li>
        <li><a href="#tabs-3">Third</a></li>
    </ul>
   <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<button id="button1">Button</button></div>
   <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
    <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
</td></tr>
</table>

То табы съезжают

Результат на скриншотах:

Тут все как надо. Такой результат получаю когда табы не в таблице:


После внесения в таблицу все съезжает, как тут:


Вчем может быть проблема?
Заранее спасибо за помощь

[DjDiablo]

Тяжёлый случай.

У тебя даже топик на форуме, и тот разъехался. Про табы вообще молчу.

[antonM]

Попробуй в css jQuery UI для класса .ui-tabs-nav li исправить top c 1px на 5px или добавь в свой css что-то типа:

.ui-tabs-nav li {
      top: 5px !important;
    }

[SlashMan]

Хорошо, спасибо, я попробую, просто не понятно почему один и тот же ДИВ в таблице показывается криво, а вне ее - как надо?

[SlashMan]

.ui-tabs-nav li {
      top: 5px !important;
    }

Спасибо, помогло! А не подскажете причину? почему так происходит?

[antonM]

Точно сказать не могу, но ответ кроется в css. Я не копал глубоко просто быстро пробежался с помощью DevTools Хрома. Надо разбираться со стилями jQuery UI, видимо наследуются какие-то дефолтные стили таблицы, поскольку для ul элемента, есть правило:

.ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; }

[antonM]

SlashMan,
второй вариант. Поменять для классов:

.ui-helper-clearfix::before, .ui-helper-clearfix::after {
content: "";
display: block; (вместо display: table;)