23 августа 2010 в 13:21
Пишу свой модуль.
На странице используются collapse для fieldset и jtooltips для всплывающих подсказок-картинок для элементов внутри.
В Firefox всё работает как надо.
Картинка с экрана прилагается.
В IE7 картинка-подсказка обрезается размерами fieldset и выдается с прокруткой справа и снизу.
Картинка тоже прилагается.
Это конфликт между ними или что?
Кусок кода для fieldset:
<legend>Model:</legend>
<div class="form-item">
<div class="form-radios">
<div class="form-item">
<div class="form-radios">
<div class="form-item" id="edit-win_model_radios_0-wrapper">
<label class="option tt" for="edit-win_model_radios_0">
<input type="radio" id="edit-win_model_radios_0" name="win_model_radios" value="0" checked="checked" class="form-radio" />
Fast Karm
<span class="tooltip">
<span class="top"></span>
<span class="middle">
<img src="fast_karm_0.jpg" />
</span>
<span class="bottom">
</span>
</span>
</label>
</div>
.........................
</div>
</div>
</div>
</div>
</fieldset
CSS к нему:
label.tt{
position:relative;
z-index:3024;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
label.tt span{ display: none; }
label.tt:hover{ z-index:3025; color: #aaaaff; background:;}
label.tt:hover span.tooltip{
display:block;
position: absolute;
top:0px; left:50px;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.95;
}
label.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url('bubble.gif') no-repeat top;
}
label.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url('bubble_filler.gif') repeat bottom;
}
label.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url('bubble.gif') no-repeat bottom;
}
| Вложение | Размер |
|---|---|
 firefox-img.jpg | 66.23 КБ |
| ie-7-img.jpg | 46.07 КБ |
Комментарии
Скорее надо css свойства fieldset-а и блока смотреть в котором ваш код находится.
По всей видимости у контейнера где-то overflow:auto стоит и ширина в процентах или пикселях.
Только странно, что firefox не выставляет scroll, если ie явно обрезает.
Плюс вероятно вы наткнулись на следующий баг, связанный с размещением элемента с свойством position:relative в элеменет с overflow:auto, тогда у ие 6-7 если верить описанию происходит бага, а именно похоже на то, что видите вы, только немного по другому (возможно из-за того что тултип у вас в блоке с relative находится как absolute)
http://stackoverflow.com/questions/67665/ie7-css-scrolling-div-bug
http://rowanw.com/bugs/overflow_relative.htm
попробуйте в контейнере у которого overflow:auto стоит и ограничена ширина и высота прописать position:relative.
Знать бы ещё, откуда ноги растут.
Я же не пишу сам ничего из этого.
Свойства наследуются от Друпала.
А к станице пристёгивается с дюжину CSS-файлов.
И где в них искать?
Да и трогать их как-то боязно.
не надо ничего трогать изучите плагин firebug для firefox-а в обязательном порядке или web developer расширение для firefox, то есть все те плагины которые прямо в броузере на странице позволят вам помочь исследовать отображенную броузером страницу.
http://ru.wikipedia.org/wiki/Firebug
или firebug lite если вы сидите исключительно на ie или opera с safari
а то до сих пор не понятно есть ли контейнер у вашего кода какой либо у которого overflow:auto стоит.
Так я же вроде свой код дал.
В Firebug для fieldset вижу только
position:relative;
}
system.css?e (строка 332)
Прошерстил все вышестоящие DIV и TABL заодно.
overflow:auto не встречается нигде.
Во всём Друпале overflow:auto торчит только в fck_dialog_common.js
Но он тут не при делах.
Был неправ, погорячился.
Больше не повторится.
Есть overflow:auto от system.css и вешается точно на каждый DIV, вложенный в fieldset.
Отловил в эксплорере девелопер тулсом.
Только ширина нигде не лимитируется, кроме как ширина таблицы в целом, где fieldset расположен в одной из колонок без уточнения ширины.
И самое поганое, что этот DIV с overflow:auto - Друпальский, добавляется автоматом при рендировании fieldset.
То есть недоступен.
попробуйте заюзать cluetip, в отличии от jtooltips сluetip может скрыть автоматом при загрузке код подсказки, а при отображении cluetip клонирует весь код подсказки и отображает в своем диве, который один на всю страницу, т.е. подсказка у вас выйдет из кода разметки страницы как бы (то есть будет до фанаря, где она когда то в разметке страницы располагалась), а jtooltips как я понимаю отображается за счет использования css при этом оставаясь включенной в каркас разметки страницы.
То есть любой jquery плагин, который выдерет код подсказки из разметки страницы и отобразит там где полагается. сам плагин cluetip который я привел, один из многих, просто его используют в игре ogame, вроде нормально работает.
Там только одно есть, если будете использовать, обеспечьте чтобы в коде подсказки не было javascript, а то jquery при размещении клонированной подсказки в код страницы выполнит их.
во всяком случае jquery 1.4 ведет себя так, 1.3.2 кажется не делает этого,хотя могу ошибаться.
Интересная тема.
Спасибо за подсказку.
Буду пробовать.