проблема с Оперой!

brainless · December 22, 2009

есть div {overflow:hidden;}

в нём - длинная таблица

table

...

tr

td - a href="#img1" /a - /td

td - img id="img2" / - /td

td - a href="#img3" /a - /td

/tr

...

/table

и содержимое tr-/tr полностью занимает окно div'а, позволяя переключаться между картинками с помощью ссылок и якорей (такая вот галерея на одном сухом html).

проблема:

в Opera переключения, при overflow:hidden, не работают, а тут, как Вы понимаете, прокрутка категорически не нужна... что делать? код валидный, xhtml 1.0 strict и css 2.1, но не работает эта пижня только в Opera %( хотя, IE7 и 8 не проверял, но если в 6 работает, то и там должно, я думаю

Justnewone · December 22, 2009

есть тут BB-Code

 [code] <тут всякий код />

Пользуйтесь, пожалуйста, им при оформлении

Searcher · December 22, 2009

что-то я не вкурил... может дадите ссылку...

TonKhaO · December 22, 2009

brainless said:
( хотя, IE7 и 8 не проверял, но если в 6 работает, то и там должно, я думаю

наивный ты человек , неужели ток новенький в верстке, ИЕ6 самый глючный и поэтому по разному ся ведет с 7 и 8 братом - лучше проверь везде :-) IETester тебе в помощь

brainless · December 22, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">

<head>
<title>page</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta name="robots" content="noarchive, noodp" />
<style type="text/css">

body {background: #abc;}
table {border-collapse: collapse; border: 0;}
td {padding: 0;}

div {border: solid black 1px; width: 200px; height: 150px;}
.div1 {overflow:hidden;}
.div2 {overflow:scroll;}

img {width: 200px; height: 100px; border: 0;}
img,a {display: block;}

a {width: 100px; height: 50px; outline: none;}
.a0 {background: black;}
.a0:hover {background: white;}
.a1,.a2 {background: gray;}
.a1:hover,.a2:hover {background: red;}


#h1,#s1 {background: orange;}
#h2,#s2 {background: green;}
#h3,#s3 {background: yellow;}
#h4,#s4 {background: blue;}

</style>
</head>
<body>


<p>hidden</p>
<div class="div1">
<table>

<tr>
<td colspan="2"><img src="1.gif" id="h1" alt=""/></td>
</tr><tr>
<td><a class="a0"></a></td>
<td><a class="a2" href="#h2"></a></td>
</tr>

<tr>
<td colspan="2"><img src="1.gif" id="h2" alt=""/></td>
</tr><tr>
<td><a class="a1" href="#h1"></a></td>
<td><a class="a2" href="#h3"></a></td>
</tr>

<tr>
<td colspan="2"><img src="1.gif" id="h3" alt=""/></td>
</tr><tr>
<td><a class="a1" href="#h2"></a></td>
<td><a class="a2" href="#h4"></a></td>
</tr>

<tr>
<td colspan="2"><img src="1.gif" id="h4" alt=""/></td>
</tr><tr>
<td><a class="a1" href="#h3"></a></td>
<td><a class="a0"></a></td>
</tr>

</table>
</div>


<p>scroll</p>
<div class="div2">
<table>

<tr>
<td colspan="2"><img src="1.gif" id="s1" alt=""/></td>
</tr><tr>
<td><a class="a0"></a></td>
<td><a class="a2" href="#s2"></a></td>
</tr>

<tr>
<td colspan="2"><img src="1.gif" id="s2" alt=""/></td>
</tr><tr>
<td><a class="a1" href="#s1"></a></td>
<td><a class="a2" href="#s3"></a></td>
</tr>

<tr>
<td colspan="2"><img src="1.gif" id="s3" alt=""/></td>
</tr><tr>
<td><a class="a1" href="#s2"></a></td>
<td><a class="a2" href="#s4"></a></td>
</tr>

<tr>
<td colspan="2"><img src="1.gif" id="s4" alt=""/></td>
</tr><tr>
<td><a class="a1" href="#s3"></a></td>
<td><a class="a0"></a></td>
</tr>

</table>
</div>


</body>
</html>

link КАК ЭТО ВЫГЛЯДИТ link

вот здесь я сделал два примера для сравнения: с overflow:hidden и с overflow:scroll у элемента div, внутри которого таблица (в обоих примерах она одинаковая).

в браузере OPERA (TonKhaO, я говорил как раз о том, что даже в IE6 нормально всё работает, проблема с Оперой. а если и в IE6 работает нормально, то в 7 и 8 - подавно, хотя и не проверял) первый пример не работает, работает только второй, но нужна не перемотка, а "переключалка"! вот как сделать так, чтобы и в Опере она работала???

проверял на FireFox3.5, Opera10, GoogleChrome - в WinXP и Mac OS X10.5, Safari4 (Mac) и IE6 (WinXP)

brainless · December 23, 2009

похоже, никто мне не может помочь))) только разработчики Оперы, наверное...

я бы и object с документом использовал (типа как iframe, если кто не в курсе), но нужно, чтобы в адресной строке появлялся id, чтобы была возможность дать ссылку к какой-либо картинке.

может, есть какие-нибудь альтернативы?

Great Rash · December 24, 2009

Скрипты не помогают? Реализовывать это на якорях имхо неразумно. Да и вообще реализовывать это так тоже не гуд.

LunatiK · December 24, 2009

Хех, прикольно, да действительно не работает

Придлагаю сделать выкрутас по этому поводу

Div с классом div1 обернуть ещё в один к примеру с классом div1_1

а в css'e сделать так:

div {border: solid black 1px; width: 200px; height: 150px;}
.div1_1 {overflow:hidden;}
.div1 {overflow:auto;  width: 217px;}
.div2 {overflow:scroll;}

тогда в опере заработает

Great Rash · December 24, 2009

Извращение какое-то.

LunatiK · December 24, 2009

Great Rash said:
Извращение какое-то.

Да но это ответное извращение, потому что тока опера почему-то не двигает див который в overflow: hidden

везде где не пробовал всё двигается, хотя даже не знаю кто прав, опера или все остальные

brainless · December 24, 2009

это "извращение" приходило мне в голову, но я даже не пробовал, потому как полагаю, что, если в закрытом от скролла блоке будет находиться открытый к скроллу блок, то появится неудобный момент с тем, что это окошко можно будет просто прокрутить колёсиком мышки %) тогда зачем якори? можно не париться и делать как все, вообще. но специально для Вас я попробую сейчас и покажу...

Great Rash, а что гуд?)) не смешите, право. что гуд, а что не гуд, это каждый сам решает. по-моему, здесь есть очевидная выгода: картинки загружаются все сразу, поэтому такая галерея просматривается "без задержек", и не надо загромождать новыми страницами, лишним кодом, теми же скриптами, потому что и так всё отлично работает, на одном здоровом html, и, что важно, есть возможность дать ссылку прямо к нужной картинке в галерее. минимализм во плоти.

понимаете, смысл весь в якорях и этих прямых ссылках, тут поможет только тот скрипт, который заставит Оперу работать с таким кодом, как надо, или что там. но, к сожалению, я в скриптах не шарю) обхожусь знаниями html, и, как видно, довольно успешно, за исключением одного браузерного нюанса, которому посвящена эта тема...

хочу заметить, что этот способ во многом универсален, не только для галерей. на месте картинок может быть и текст, и другое наполнение сайта, выгода в том, что всё это находится на одной странице (сайт из одной страницы!). "...com/about" = "...com/#about" и другие вариации, разве это не удобно? кажется, это ещё и быстрее... безусловно, это не панацея, и крупный контент даже при такой организации надо разделять, зато уже на меньшее количество частей. а вот для микросайтов это воистину способ из способов!

думаю, Опера не одном человеку в этом месте крылья сломала

brainless · December 24, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">

<head>
<title>page2</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta name="robots" content="noarchive, noodp" />
<style type="text/css">

body {background: #abc;}
table {border-collapse: collapse; border: 0;}
td {padding: 0;}

.div1 {overflow: hidden; border: solid black 1px; width: 200px; height: 150px;}
.div2 {overflow: scroll; border:0; width: 220px; height: 170px;}

img {width: 200px; height: 100px; border: 0;}
img,a {display: block;}

a {width: 100px; height: 50px; outline: none;}
.a0 {background: black;}
.a0:hover {background: white;}
.a1,.a2 {background: gray;}
.a1:hover,.a2:hover {background: red;}


#h1,#s1 {background: orange;}
#h2,#s2 {background: green;}
#h3,#s3 {background: yellow;}
#h4,#s4 {background: blue;}

</style>
</head>
<body>


<p>hidden+scroll</p>
<div class="div1">

<div class="div2">
<table>

<tr>
<td colspan="2"><img src="1.gif" id="s1" alt=""/></td>
</tr><tr>
<td><a class="a0"></a></td>
<td><a class="a2" href="#s2"></a></td>
</tr>

<tr>
<td colspan="2"><img src="1.gif" id="s2" alt=""/></td>
</tr><tr>
<td><a class="a1" href="#s1"></a></td>
<td><a class="a2" href="#s3"></a></td>
</tr>

<tr>
<td colspan="2"><img src="1.gif" id="s3" alt=""/></td>
</tr><tr>
<td><a class="a1" href="#s2"></a></td>
<td><a class="a2" href="#s4"></a></td>
</tr>

<tr>
<td colspan="2"><img src="1.gif" id="s4" alt=""/></td>
</tr><tr>
<td><a class="a1" href="#s3"></a></td>
<td><a class="a0"></a></td>
</tr>

</table>
</div>

</div>

</body>
</html>

link КАК ЭТО ВЫГЛЯДИТ link

вот, двойной div, внешний без скролла, второй - с ним. какбе кнопки-то теперь и в Опере работают, но можно и мышкой прокрутить. что и требовалось доказать.

в ходе эксперимента выяснилось: overflow:hidden блокирует возможность скроллить блочную область мышкой во всех браузерах (проверял, конечно, не во всех), но способность переходить по якорям внутри этой области не имеет только Опера.

дополнительный вопрос, который, возможно, поможет решить проблему:

если вместо div использовать object, внутри которого так же будет таблица с якорями и ссылками на них, КАК нужно оформить его, чтобы не прописывать display:block, но отобразить в нём его содержимое, а также использовать overflow:hidden для получения конечного результата в виде искомой галереи?

вот данные задачи:

<object type="text/html" style="overflow:hidden">
<table>...</table>
</object>

задача по сути глупая, но главный вопрос в том, можно ли сделать подобное, используя не div, а object?

brainless · January 8, 2010

так... боюсь, что использовать object вместо div невозможно. потом, ошибка задачи в том, - я только что заметил, - что object является блочным элементом (я так думаю), а значит при overflow:hidden была бы та же самая история, что и с div, то есть ничего бы это не решило.

однако есть другая возможная конфигурация: использовать object как iframe, а внутри object расположить оригинальный div с таблицей галереи. потому как, если путь к объекту в атрибутах object указан неправильный, то object не отображается (отображается, но его не видно. это можно проверить, задав ему border), зато отображается то, что находится в нём.

таким образом, можно написать маленький скрипт, который бы задавал данные атрибуту data в object... правда, я не знаю, насколько это можно, потому что в js совсем не шарю(

<object data="переменная" type="text/html">
<div><table>...</table></div>
</object>

и скрипт, который бы задавал значение переменной,
что-то вроде "if Opera { переменная = page.html }" (простите моё косноязычие),
а если это не-Опера, то скрипт не среагирует, а значит останется "неправильный адрес" в виде имени переменной,
тогда object не отобразится, а отобразится div, который находится внутри.
то есть изменения минимальны, главное, чтоб работало...
зато, если скрипт в браузере не включён, то галерею нельзя будет просмотреть только в Опере %) и к чёрту

/вот тут я процитировал это в новую тему, а то всё-таки раздел здесь о другом/

также в ходе этого эксперимента выяснилось, что в iframe и object_как_iframe при overflow:hidden в Опере содержимое всё равно можно прокрутить. такая вот подставная эта Опера оказалась. казнить нельзя помиловать... придётся тогда делать в таком object каждой картинке отдельную страницу.

вощем, тему up, всех с новым годом и всё такое

Sign In

проблема с Оперой!

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information