IE6 CSS подсказка не появляется - PullRequest
Новая
       11

IE6 CSS подсказка не появляется

1 голос
/ 06 апреля 2010

Я использую всплывающую подсказку, которая работает в FF, Chrome и IE7-8, но в IE6 она не отображается. Вы можете перейти на эту страницу http://www.avaline.com/ Bags / Eco-Friendly-Bags / R1500 и войти с паролем test2@gmail.com: test02, затем нажать кнопку «Добавить в корзину» и навести курсор на вопросительные знаки, чтобы увидеть (или не вижу) всплывающих подсказок.

Это соответствующие HTML и CSS: 

<DIV class="oewBox" id="oewImpLocDiv" style="BACKGROUND-IMAGE: url(/images/img/org4.gif)">
<A class="tooltip" href="#"><SPAN class=""><STRONG>More than 2 imprint locations?</STRONG> Test </SPAN></A>
</DIV>

<style>
/* Rule from element "style" attribute */
element.style {
    BACKGROUND-IMAGE: url(/images/img/org4.gif)
}
/* Rule N°8 from inline stylesheet */
.oewBox {
    PADDING-RIGHT: 8px;
    PADDING-LEFT: 40px;
    PADDING-BOTTOM: 16px;
    MARGIN: 0px 0px 6px;
    PADDING-TOP: 6px;
    BORDER-BOTTOM: #ff7c14 3px solid
}
/* Rule N°7 from inline stylesheet */
.oewBox {
    BACKGROUND-POSITION: 0px 0px;
    BACKGROUND-IMAGE: none;
    BACKGROUND-REPEAT: no-repeat
}
/* Rule N°11 from /site/av-files/mainstyles.css */
A:active {
    COLOR: #3b88c4;
    TEXT-DECORATION: none
}
/* Rule N°10 from /site/av-files/mainstyles.css */
A:hover {
    COLOR: #000;
    TEXT-DECORATION: none
}
/* Rule N°9 from /site/av-files/mainstyles.css */
A:visited {
    COLOR: #3b88c4;
    TEXT-DECORATION: underline
}
/* Rule N°8 from /site/av-files/mainstyles.css */
A:link {
    COLOR: #3b88c4;
    TEXT-DECORATION: underline
}
/* Rule N°7 from /site/av-files/mainstyles.css */
A {
    COLOR: #3b88c4;
    TEXT-DECORATION: underline
}
/* Rule N°52 from inline stylesheet */
A.tooltip {
    BACKGROUND: url(/images/img/question.gif) no-repeat;
    FLOAT: right;
    WIDTH: 19px;
    HEIGHT: 20px
}
/* Rule N°54 from inline stylesheet */
A.tooltip:hover SPAN {
    BORDER-RIGHT: #ff7c14 1px solid;
    BORDER-TOP: #ff7c14 1px solid;
    DISPLAY: inline;
    BACKGROUND: #ffffff;
    BORDER-LEFT: #ff7c14 1px solid;
    COLOR: #000;
    BORDER-BOTTOM: #ff7c14 1px solid;
    POSITION: absolute
}
/* Rule N°53 from inline stylesheet */
A.tooltip SPAN {
    PADDING-RIGHT: 3px;
    DISPLAY: none;
    PADDING-LEFT: 3px;
    FONT-WEIGHT: normal;
    FONT-SIZE: 11px;
    PADDING-BOTTOM: 2px;
    MARGIN-LEFT: -245px;
    WIDTH: 230px;
    PADDING-TOP: 2px
}
</style>

Ответы [ 5 ]

0 голосов
/ 08 апреля 2010

Несколько полезных советов (я вошел и проверил некоторые из них):

  • Добавьте zoom:1 к span и тегу A CSS.
  • По умолчанию установите диапазон relative.

Кроме того, фон на участках читается как прозрачный, поэтому у вас либо есть ошибка в CSS, либо что-то не объявляется правильно.

Удачи, дорогая!

0 голосов
/ 07 апреля 2010

Это никогда не сработает как есть. Рассмотрим эти два правила: 

A.tooltip:hover SPAN {
    DISPLAY: inline;
}
A.tooltip SPAN {
    DISPLAY: none;
}

И спросите себя: если промежуток не отображается, как вы можете навести на него курсор?

0 голосов
/ 06 апреля 2010

Хммм ... может быть, попробовать изменить class=tooltip на class="tooltip"?Я не знаю, что DOCTYPE вы используете, но атрибут без кавычек может вызывать проблему ...

РЕДАКТИРОВАТЬ: Провел еще какое-то исследование, попробуйте это:

replace 

A.tooltip:hover SPAN

с 

A.tooltip:link:hover SPAN
0 голосов
/ 06 апреля 2010

Сначала сделайте это: 

add an HREF to your A. href="#" or something

Я бы также реализовал всплывающие подсказки так: 

a.tooltip:hover span {
  background:none repeat scroll 0 0 #FFFFFF;
  border:1px solid #FF7C14;
  color:#000000;
  display:block;
  position:absolute;
  top: 0;
  left: -245px;
}

a.tooltip {
  background:url("/images/img/question.gif") no-repeat scroll 0 0 transparent;
  float:right;
  height:20px;
  width:19px;
  position: relative;
}

a.tooltip span {
  display:none;
  font-size:11px;
  font-weight:normal;
  padding:2px 3px;
  width:230px;
}
0 голосов
/ 06 апреля 2010

Просто предложение здесь. Возможно, захотите попробовать qTip. Это плагин jQuery, который отлично работает.

QTIP

...