Как задать условие для Оперы
Доброго дня! Помогите начинаещему....Поставил на сайт easy-accordion где в скрипте прописывается отдельно для каждого браузера ротация (поворот) текста и фоновой картинки. Вот кусок скрипта:
.easy-accordion{display:block;position:relative;overflow:hidden;padding:0;margin:0} .easy-accordion dt,.easy-accordion dd{margin:0;padding:0} .easy-accordion dt,.easy-accordion dd{position:absolute} .easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;} .easy-accordion dd{z-index:1;opacity:0;overflow:hidden} .easy-accordion dd.active{opacity:1;} .easy-accordion dd.no-more-active{z-index:2;opacity:1} .easy-accordion dd.active{z-index:3} .easy-accordion dd.plus{z-index:4} .easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); Для оперы правила нет и текст с фоновым рисунком вместо ротации на 90 отображается горизонтально. Во всех остальных браузерах скрипт работает корректно. Можно ли прописать правило для оперы и как? помогите решить кто знает....жалко сносить сделанное :( :( |
-o-transform: rotate(90deg); неуверен, но попробовать стоит |
Цитата:
|
методом тыка не получается :( как сместить влево никто не скажет? ширина окна 585x195 Смещать вверх-вниз удается меняя значения 195px 0px, а вправо-влево никак :cray:
|
-o-transform: translateX(50px);
|
не получается :( куда как лучше воткнуть? пробовал несколько вариантов, либо поворот изчезает, либо ничего не меняется...сейчас вот такой код при котором по высоте текст и картинка которые поворачиваются, выровнены, но закладки гармошки формируются в центре окна:
* UNLESS YOU KNOW WHAT YOU'RE DOING, DO NOT CHANGE THE FOLLOWING RULES */ .easy-accordion{display:block;position:relative;overflow:hidden;padding:0;margin:0} .easy-accordion dt,.easy-accordion dd{margin:0;padding:0} .easy-accordion dt,.easy-accordion dd{position:absolute} .easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Opera */ -o-transform: rotate(-90deg); -o-transform-origin: 195px 0px; /* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;} .easy-accordion dd{z-index:1;opacity:0;overflow:hidden} .easy-accordion dd.active{opacity:1;} .easy-accordion dd.no-more-active{z-index:2;opacity:1} .easy-accordion dd.active{z-index:3} .easy-accordion dd.plus{z-index:4} .easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* Opera */ -o-transform: rotate(-90deg); |
их перечислять надо через пробел.
пример для вебкитов : <img src="http://javascript.ru/forum/image.php?u=12584&dateline=1328048771" style="*!*-webkit-transform: rotate(90deg) translateX(250px) scale(4)*/!*"> в вашем случае, -o-transform: rotate(-90deg) translateX(50px); |
так и делал....перемещения нет, поднялось вверх на 50px...может Y?
|
YES!!!!! :dance: Y ставим и минусом поскольку все перевернуто:) Вот итог
/* Opera */ -o-transform: rotate(-90deg) translateY(-195px); -o-transform-origin: 195px 0px;...может кому пригодиться кто будет работать с данным скриптом. ВСЕМ ОГРОМНОЕ СПАСИБО!!! Форум это сила!:) |
Часовой пояс GMT +3, время: 08:14. |