float ячеек таблицы в ie7

[Adlaran]

Пытаюсь встроить содержимое одного из канала youtube на сайт с помощью гугловского же видеобара. http://www.google.com/uds/solutions/wizards/videobar.html

В настройках можно установить вертикальную и горизонтальную ориентацию бара. Скрипт выводит картинки с ссылками на видео в однострочной таблице (при горизонтальной ориентации бара), в каждой ячейке по изображению. Однако мне нужно было устроить что-то по типу видео галлереи: чтоб все не влезающие в строку ячейки переносились на следующую.

Попробовал так сделать: для бара установил горизонтальную ориентацию, а так же, чтоб он выводил все видеозаписи канала, а не последние четыре. В стилях ячеек таблицы поставил float: left;. Всё бы было хорошо, однако ie7 никак не реагирует на обтекание. Пробовал ставить различный display для таблицы, ячейки, строки - всё без толку.

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

[psywalker]

А дай-ка ссылку на тестовую страницу с примером. Да и скриншоты не помешали бы, того что нужно и того, что НЕ нужно.

[Adlaran]

  On 6/4/2011 at 5:41 AM, psywalker said:

А дай-ка ссылку на тестовую страницу с примером. Да и скриншоты не помешали бы, того что нужно и того, что НЕ нужно.

Да всё что нужно, это установить обтекание для ячеек таблицы в ie7. Вот в нём у меня вот так:

А в других браузерах, в том числе ie больших версий, так, как нужно:

Как я уже писал, скрипт выводит картинки с ссылками на видео в однострочной таблице, по этому кусок соответствующий кусок кода выглядит примерно так:

<table>
   <tbody>
       <tr>
           <td>
              <div>
                 <img height="75" width="100" vspace="1" src="">
              </div>
           </td>
           <td>
              <div>
                 <img height="75" width="100" vspace="1" src="">
              </div>
           </td>
           <td>
              <div>
                 <img height="75" width="100" vspace="1" src="">
              </div>
           </td>
           <td>
              <div>
                 <img height="75" width="100" vspace="1" src="">
              </div>
           </td>
           <td>
              <div>
                 <img height="75" width="100" vspace="1" src="">
              </div>
           </td>
           <td>
              <div>
                 <img height="75" width="100" vspace="1" src="">
              </div>
           </td>
           <td>
              <div>
                 <img height="75" width="100" vspace="1" src="">
              </div>
           </td>
           <td>
              <div>
                 <img height="75" width="100" vspace="1" src="">
              </div>
           </td>
       </tr>
   </tbody>
</table>

Можете у себя так же попробовать. Вот этот скрипт, можете поставить его на пустую страницу и поизменять ширину окна браузера и посмотреть как отображается в мозилле(как хотелось бы), и как это в ie выглядит.

<!-- ++Begin Video Bar Wizard Generated Code++ -->
  <!--
  // Created with a Google AJAX Search Wizard
  // http://code.google.com/apis/ajaxsearch/wizards.html
  -->

  <!--
  // The Following div element will end up holding the actual videobar.
  // You can place this anywhere on your page.
  -->
  <div id="videoBar-bar">
    <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
  </div>

  <!-- Ajax Search Api and Stylesheet
  // Note: If you are already using the AJAX Search API, then do not include it
  //       or its stylesheet again
  -->
  <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-vbw"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/css/gsearch.css");
  </style>

  <!-- Video Bar Code and Stylesheet -->
  <script type="text/javascript">
    window._uds_vbw_donotrepair = true;
  </script>
  <script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js?mode=new"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/solutions/videobar/gsvideobar.css");
  </style>

  <style type="text/css">
    .playerInnerBox_gsvb .player_gsvb {
      width : 320px;
      height : 260px;
    }
    .resultCell_gsvb{
      float: left;
    }
  </style>
  <script type="text/javascript">
    function LoadVideoBar() {

    var videoBar;
    var options = {
        largeResultSet : true,
        horizontal : true,
        autoExecuteList : {
          cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
          cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
          executeList : ["ytfeed:most_viewed.this_week","ytchannel:fordmodels"]
        }
      }

    videoBar = new GSvideoBar(document.getElementById("videoBar-bar"),
                              GSvideoBar.PLAYER_ROOT_FLOATING,
                              options);
    }
    // arrange for this function to be called during body.onload
    // event processing
    GSearch.setOnLoadCallback(LoadVideoBar);
  </script>
<!-- ++End Video Bar Wizard Generated Code++ -->

Edited June 5, 2011 by Adlaran

[Adlaran]

В общем, спасибо за небольшое внимание, но помощь уже не нужна. Я перелопатил гугловский js-ник, чтоб всё дивами выводилось, так что проблемы уже нет.