Jump to content
  • 0

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

PCSpeaker

Asked by PCSpeaker,

 Share

Question

PCSpeaker Explorer

PCSpeaker

Posted
Posted 

.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 пробовал использовать, ситуация не изменилась)

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

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0
harrids Explorer

harrids

Posted
Posted (edited) 

<!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 by harrids
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)

harrids

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

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

Edited by psywalker
Link to comment
Share on other sites
  • 0
PCSpeaker Explorer

PCSpeaker

Posted
  • Author
Posted (edited)

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

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

Edited by PCSpeaker
Link to comment
Share on other sites
  • 0
harrids Explorer

harrids

Posted
Posted (edited)

В общем, видимо, у оперы проблемы с вычислением позиции относительно 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 by harrids
Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted

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

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

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

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

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

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

texttext

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

Вот.

Link to comment
Share on other sites
  • 0
harrids Explorer

harrids

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept