Jump to content
  • 0

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


Adlaran
 Share

Question

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

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

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

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

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

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

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

1369743m.jpg

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

2726339m.jpg

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


<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 by Adlaran
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy