Выпадающее окно на css

PCSpeaker · July 4, 2009

.popup a {
position:relative;
}

.popup a span{
	position:absolute;
	display: none;
	top: 20px;
	left: 20px;
	z-index: 1;
	background: #FFFFFF;
}

.popup a:hover span {
	display: block;
}

Вот код страницы:
<span class="popup"><a href="">Ссылка<span>Всплывающий текст</span></a></span>

Цель: при наведении мышкой появлется рядом с ней окошко в котором определенный текст.

В Firefox, Chorme и IE7 работает нормально, а вот в Opera часть (те элементы что снизу экрана) показывается не там где нужно (те что сверху экрана работают нормально), а в IE6 не работает вовсе. В чем моя ошибка? (Visibility пробовал использовать, ситуация не изменилась)

Если этот способ плох, посоветуйте способ, чтобы везде отображалось корректно.

psywalker · July 4, 2009

в опере починил путём добавления Спану внутри ссылки высоты, а насчёт ИЕ6 пока не понял сам!

PCSpeaker · July 4, 2009

Сделал так

.popup a:hover span {
	visibility: visible;
	height: 100%;
}

В опере показываться стали все, но опять же не в том месте где нужно. Или я не туда высоту вставляю?

psywalker · July 4, 2009

.popup a:hover span {

display: block;

height: 300px;

width: 300px;

z-index: 1;

}

PCSpeaker · July 5, 2009

Не работает.

Вот посмотрите хотя бы тут http://altkord.ru/groups/him/2065/8529/

Там сверху первая сточка в опере где нужно отображается, а нижняя строчка вообще не рядом с местом наведения.

harrids · July 5, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css tooltip</title>
<style type="text/css">
<!--
body {
  font-family: Verdana, sans-serif;
  line-height: 1.2;
}

a.tooltip {
  position: relative;
}

a.tooltip span {
  display:none;
}


a.tooltip:hover {
  font-size: 100%; /* IE6 fix */
}

a.tooltip:hover span {
  display: block;
  position: absolute;
  top: 1em;
  left: 2em;
  padding: 0.2em 0.6em;
  border: 1px solid #996633;
  background-color: #FFFF66;
  color: #000;
  white-space: nowrap;

}

-->
</style>
</head>

<body>
<p><a href="#" class="tooltip">Link<span>just a tooltip</span></a> plus simple tooltip.</p>

</body>
</html>

Opera 9.64, Firefox 3.5, IE8 нормально. Чистого IE6 сейчас нет, так что проверял на http://www.xenocode.com/browsers/, вроде работает, но появляется андерлайн, не знаю чей баг) может придется еще text-decoration:none для спана делать.

ps спойлер чего-то не работает

Edited July 5, 2009 by harrids

psywalker · July 5, 2009

harrids

Отличная работа друг, в ИЕ6 тоже кстати отлично работает, единственное я ссылке поставил text-decoration: none; и всё, а так всё вообще гуд!

p.s. - font-size: 100%; /* IE6 fix */ - вот про это кстати я даже не догадывался, хорошая штука, буду знать!

Edited July 5, 2009 by psywalker

PCSpeaker · July 5, 2009

Ну вот хоть убейте 1 в 1 скопировал css harrids'а, а в опере только первая строчка правильно отображается, остальное всё в разнобой (см мою ссылку что я дал в прошлом посте, там уже сделано с css, что дал harrids). Там кстати еще текст залезает на эту подсказку, поэтому сделал z-index: 1; везде залезать друг на друга перестало, кроме эксплорера, который не понимает видимо этот параметр (тестировал в IE8).

p.s. если вы уже ходили по моей ссылке то не забудьте принудительно обновить страницу, так как css кэшируется.

Edited July 5, 2009 by PCSpeaker

harrids · July 6, 2009

В общем, видимо, у оперы проблемы с вычислением позиции относительно inline элементов, чего не наблюдается у block элементов.

Так что можно сделать a.tooltip { display: inline-block; }, а чтобы в IE тултип не перекрывался другими ссылками - перести position: relative из a.tooltip в a.tooltip:hover.

Конечный вариант:

a.tooltip {
display: inline-block;
}

a.tooltip span {
display:none;
}


a.tooltip:hover {
font-size: 100%; /* IE6 fix */
position: relative;
}

a.tooltip:hover span {
display: block;
position: absolute;
top: 1em;
left: 2em;
padding: 0.2em 0.6em;
border: 1px solid #996633;
background-color: #FFFF66;
color: #000;
white-space: nowrap;
}

Хотя в опере при этом по-прежнему образуется непонятная пустота снизу.

Edited July 6, 2009 by harrids

Great Rash · July 6, 2009

Последний вариант у меня в ИЕ6 не работает.

harrids · July 6, 2009

Great Rash said:
Последний вариант у меня в ИЕ6 не работает.

А по-конкретней? У меня проблем не наблюдается.

Great Rash · July 6, 2009

А по конкретней:

создал такую конструкцию

<a class="tooltip" href="#">text<span>text</span></a>

скопипастил ваш код

запустил эмулятор винды (ХР SP1), чтобы посмотреть в ИЕ6 (а то у меня ИЕ8 стоит)

и увидел вот такой текст

texttext

доктайп стоит XHTML 1.0 Strict

Вот.

harrids · July 6, 2009

Great Rash

Скинь весь док плз, посмотрю.

Great Rash · July 6, 2009

Мне некуда скинуть. Да и что там скидывать. Я все свои действия досконально описал. Может проблема в виртуальной машине?

harrids · July 6, 2009

Great Rash said:
Мне некуда скинуть. Да и что там скидывать. Я все свои действия досконально описал. Может проблема в виртуальной машине?

Воспроизвести баг у меня не получается. MS VirtualPC 2007 + WinXPSP3 + IE6, все нормально.

Great Rash · July 6, 2009

У меня машина WMware Workstation 6.0.5 Windows XP SP2

PCSpeaker · July 8, 2009

harrids, огромное спасибо! оно и вправду работает!

Sign In

Выпадающее окно на css

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information