Вкладки jQuery UI расположены примерно на 50% их высоты ниже друг друга - PullRequest
Новая
       29

Вкладки jQuery UI расположены примерно на 50% их высоты ниже друг друга

1 голос
/ 24 сентября 2011

Это довольно странно, и я не могу заставить его перестать происходить.

Вот соответствующий код. Я использую хост Google CDN для темы UI-lightness. 

<div id="prof_div">
    <ul>
        <li><a href="#prof_home">Profile</a></li><br/>
        <li><a href="#prof_details">Details</a></li><br/>
        <li><a href="#prof_settings">Settings</a></li><br/>
    </ul>

Это единственный релевантный HTML. Вот jQuery / JavaScript 

    $(document).ready(function() {  
        $('#prof_div').tabs({ 
            fx: { height: 'toggle', opacity: 'toggle' } 
        });
    });

И это выглядит так: 

TAB 1
      TAB 2
            TAB 3

Вместо этого: 

TAB 1 - TAB 2 - TAB 3

У меня нет пользовательских CSS, действующих на них вообще (я даже очищал свои таблицы стилей для проверки).

Есть идеи, почему это происходит? При необходимости выложу скриншот.

Спасибо! :)

EDIT

Вот мои запросы CDN 

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="https://www.google.com/jsapi?key=very long string"></script>

<script type="text/javascript" src="/JSFunctions.js"></script>
<script type="text/javascript">
google.load("jquery", "1.6.4");
google.load("jqueryui", "1.8.16");
....
</script>

1 Ответ

1 голос
/ 24 сентября 2011

Удалите те, которые заканчиваются <br/> s из ваших <li> s. Их там быть не должно. 

<div id="prof_div">
<ul>
    <li><a href="#prof_home">Profile</a></li><br/>
    <li><a href="#prof_details">Details</a></li><br/>
    <li><a href="#prof_settings">Settings</a></li><br/>
</ul>

Вот скрипка .

...