myoperam Проблема с css!
ВНИМАНИЕ! ОСТЕРЕГАЙТЕСЬ МОШЕННИКОВ!
Помните, что все браузеры Opera АБСОЛЮТНО БЕСПЛАТНЫ.
Загружайте новые версии ТОЛЬКО С ОФИЦИАЛЬНОГО САЙТА или с ресурсов, которым ДОВЕРЯЕТЕ!


Предыдущее | Следующее | Архив форума | operaman.ru | Поиск
Проблема с css! kapadult  08/22/09 12:17 PM

Привет всем! Помогите разобраться с css. В общем проблема в следующем, мне нужно чтобы при наведении на ссылку, в необходимом месте всплывала картинка. В IE и Firefox все рабоотает нормально, а вот в Опере почему-то картинка смещена намного вниз. С чем это может быть связано?

Код ссылки я описывать не буду, там просто добавляется class="picture", а вот css код посмотрите:

Code:
  
.picture{
position: relative;
z-index: 0;
}

.picture:hover{
background-color: #CECECE;
z-index: 0px;
}

.picture span{
position: absolute;
background-color: #CECECE;
padding: 5px;
left: 150px;
border: 1px dashed gray;
visibility: hidden;
color: #CECECE;
text-decoration: none;
}

.picture span img{
border-width: 0;
padding: 0px;
}

.picture:hover span{
visibility: visible;
top: -3px;
left: 740px;
}




Re: Проблема с css! iNDiAnFLy  08/23/09 08:26 AM

ну вопервых учите матачасть!
z-index: 0px; - это что?
z-index - это целое число означающее номер слоя относительно нулевого слоя (body)
так что никаких "px"

во вторых: картинка с абсолютным позиционирование у тебя будет позиционироваться относительно содержащего её блока со свойством "relative",
с отступом левого края картинки влево от левого края блока в 740px
и отступом верхнего края картинки от верхнего края блока в -3px
-- верно?

вот тут начинается магия =)
IE и мурзилка очень скверно себя повели в данной ситуации, нарушая спецификации CSS.

дело в том, что как я писал выше, позиционироваться картинка должна относительно блока со свойством "relative",
но первый такой блок в твоём случае это не элемент <a>, а <body> -- ведь элемент <a> это не блок! это инлайновый элемент.
вот если пропишешь для класса "picture" свойство "display:block",
то получишь желаемый результат.



operaman.ru - Home


Rambler's Top100