Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Глюки Opera с полупрозрачными image position: absolute (https://javascript.ru/forum/jquery/22462-glyuki-opera-s-poluprozrachnymi-image-position-absolute.html)

zukalo 20.10.2011 22:07

Глюки Opera с полупрозрачными image position: absolute
 
Есть Rich приложение на jQuery. Часть картинок позиционируется абсолютно. Всё работает нормально везде, кроме оперы.

В опере такой глюк:

При активации событий мыши (например на .mouseover изменить картинку на другую), полупрозрачны картинки с абсолютным позиционированием "едут" вверх, т.е. изменяют свой top.

Если честно, вообще не знаю куда копать. Мне бы помогли даже догадки.
Зараннее спасибо.

Black_Prince 21.10.2011 10:17

Код пожалуйста в студию замены полупрозрачных картинок.

zukalo 21.10.2011 21:15

Уточню, не картинки полупрозрачные, а div, в котором они находятся.
Установка:
box_states = [img_url + 'checkbox_active.png', 
                    img_url + 'checkbox_simple.png', img_url + 'checkbox_over.png']

            $elem.find('img.check')      
            .mousedown(function() { checkHandler($(this)); return false })
            .dblclick(function()  { return false }) 
            .mouseover(function() { checkHighlight($(this), CHECK.HOVER) })
            .mouseout(function()  { checkHighlight($(this), CHECK.EMPTY) })


Подсветка чекбокса:
function isChecked($check) 
 {
   return $check.attr('src') == box_states[CHECK.ACTIVE]
 }

function checkHighlight($check, over)
 {
   if(!isChecked($check)) 
    $check.attr('src', box_states[over])
 }


Также подключены скрипты jScrollPane и wheel.js для него (поддержка колеса мыши). Не знаю как вообще всё это отладить.

zukalo 25.10.2011 14:30

Выложил всё целиком, чтобы можно было посмотреть:

http://mtg-kaluga.230101.org/test/

Картинка едет, и ничего не помогает)

Black_Prince 25.10.2011 17:22

что я могу сказать - проблемы чисто в верстке.

попробуйте сделать что то типа такого:
<img src="http://mtg-kaluga.230101.org/test/content/fav1.png" class="fav">
    <div class="div_inner_img">
        <img src="http://mtg-kaluga.230101.org/test/content/checkbox_simple.png" class="check nos">
    </div>


.fav {
  float: left;
}

.check {
/*т.е. убираем стили для этого класса*/
}

.textags {
  height: 33px;
  /*float: left;*/
 }

.div_inner_img
 {
    display: inline-block;
    float: left;
    margin-left: -25px;
    margin-top: 10px;
}


P.S. Едет верхний "чекбокс", но для него надо просто поставить другие стили и все, например убрать марджин.

nikita.mmf 25.10.2011 18:00

глюки не в опере, а в кривой верстке

zukalo 25.10.2011 19:27

Цитата:

просто поставить другие стили
поясните пожалуйста

Кстати едет не верхний, а все полупрозрачные. Т.е. если добавить opacity ещё к парочке, то и они поедут.

Попробую переделать...
А подскажите софт для ловли багов в верстке?

Black_Prince 26.10.2011 12:00

zukalo, Вы меня немного не поняли :)

попробуйте мой вариант верстки просто. т.е. поместить свой имейдж с чекбоксом в див и применить те стили.

По крайней мере у меня в опере все стало отлично. Разве что сверху чекбокс немного стилями не выровнен и он находится левее остальных. Вот это я и имел ввиду под "едет верхний".

"Просто поставить другие стили" - это значит для верхнего чекбокса назначить другой класс, у которого не будет margin-left;

zukalo 04.11.2011 16:47

Black_Prince, хорошее решение. Оно конечно работает, однако отрицательный маржин не есть гуд. У меня при определенных условиях меняется картинка, ширина которой другая, и Checkbox уезжает влево, а нужно чтобы он как бы висел на месте в любом случае.


Часовой пояс GMT +3, время: 13:42.