Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.05.2011, 14:39
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,219

Поведение hover в ИЕ7
Столкнулся с не понятной мне ситуацией...

<!DOCTYPE html>
<html>
<head>
<style>
* {
	margin: 0;
	padding: 0;
}
html,
body {
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	font-family: Arial;
	font-size: 10pt;
}
#container {
	position: relative;
	min-width: 950px;
	max-width: 1200px;
	min-height: 100%;
	margin-left: auto;
	margin-right: auto;
	background: url('img/head.jpg') repeat-x;
}
#content {
	margin-left: 50px;
	margin-right: 50px;
}
#h_menu {
	float: left;
	width: 228px;
	list-style-type: none;
	color: #117070;
	font-size: 10pt;
}
#h_menu > li {
	margin-bottom: 20px;
	cursor: pointer;
	border: 1px solid;
}
#h_menu > li:hover {
	font-size: 12pt;
}
#h_menu li:hover .h_sub_menu {
	display: block;
}
.h_sub_menu {
	display: none;
	margin-top: 18px;
	margin-left: 19px;
	list-style-type: none;
	color: #149b9e;
	font-size: 9pt;
}
.h_sub_menu > li {
	margin-bottom: 20px;
}
.h_sub_menu > li:hover > span {
	font-weight: bold;
	background: url('img/h_sub_menu.jpg') repeat-x bottom;
}
#info {
	margin-left: 277px;
}
#info > p {
	/*line-height: 1.5;*/
	font-size: 11pt;
	text-align: justify;
}
</style>
<script>
</script>
</head>
<body>
<div id='container'>
	<div id='content'>
		<div id='cnt_box'>
			<ul id='h_menu'>
				<li>Сборочно-монтажное оборудование
					<ul class='h_sub_menu'>
						<li><span>Автоматы установки компонентов</span></li>
						<li><span>Оборудование для трафаретной печати</span></li>
						<li><span>Печи конвекционного оплавления</span></li>
						<li><span>Конвейерные системы</span></li>
						<li><span>Автоматы дозирования</span></li>
						<li><span>Системы пайки волной</span></li>
						<li><span>Системы селективной пайки</span></li>
					</ul>
				</li>
				<li>Инспекционное оборудование</li>
				<li>Испытательное оборудование</li>
				<li>Вспомогательное оборудование</li>
				<li>Шкафы сухого хранения</li>
				<li>Б/у оборудование</li>
			</ul>
			<div id='info'>
				<p>test</p>
				<p>
					Ганимед неравномерен. Магнитное поле оценивает годовой параллакс, однако большинство
					спутников движутся вокруг своих планет в ту же сторону, в какую вращаются планеты. 
					Газопылевое облако вызывает центральный Ганимед, таким образом, атмосферы этих планет 
					плавно переходят в жидкую мантию. В отличие от пылевого и ионного хвостов, полнолуние 
					иллюстрирует межпланетный ионный хвост, об интересе Галла к астрономии и затмениям 
					Цицерон говорит также в трактате "О старости" (De senectute).
				</p>
		</div>
	</div>
</div>
</body>
</html>


Проявляется в ИЕ7 точно. В Опере, ФФ и Хроме проблем нет...
Если информации в диве info больше по высоте чем в первом пункте меню - ховер не желает держать подменю видимым... Если оставить только обзац тест - меню работает нормально.

Как бы "побороть" эту проблемку
Ответить с цитированием
  #2 (permalink)  
Старый 01.05.2011, 18:24
Аватар для Amphiluke
   ☽
Отправить личное сообщение для Amphiluke Посмотреть профиль Найти все сообщения от Amphiluke
 
Регистрация: 07.01.2011
Сообщений: 254

Сообщение от ksa
Как бы "побороть" эту проблемку
Задать фон списку…
Код:
#h_menu {
    background:#fff;
...
Ответить с цитированием
  #3 (permalink)  
Старый 01.05.2011, 18:46
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,219

Сообщение от Amphiluke
Задать фон списку…
Но, чёрт возьми, Холмс, как?! (с)

Действительно помогло!
Ответить с цитированием
  #4 (permalink)  
Старый 01.05.2011, 19:24
Аватар для Amphiluke
   ☽
Отправить личное сообщение для Amphiluke Посмотреть профиль Найти все сообщения от Amphiluke
 
Регистрация: 07.01.2011
Сообщений: 254

Вероятно, это баг IE из разряда вот таких.
Кстати, если фон списка нежелателен из соображений дизайна, то в качестве фикса достаточно даже такой записи:
Код:
#h_menu {
    background:url(#);
...
Ответить с цитированием
  #5 (permalink)  
Старый 01.05.2011, 21:45
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,219

Еще раз спасибо, выручил.
Ответить с цитированием
  #6 (permalink)  
Старый 26.05.2011, 00:54
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Сообщение от Amphiluke Посмотреть сообщение
Вероятно, это баг IE из разряда вот таких.
Кстати, если фон списка нежелателен из соображений дизайна, то в качестве фикса достаточно даже такой записи:
Код:
#h_menu {
    background:url(#);
...
Эм... А "background: transparent" прокатит?

Просто background: url(#) - это как <a href="#"></a>.
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #7 (permalink)  
Старый 26.05.2011, 09:50
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,219

Сообщение от trikadin
А "background: transparent" прокатит?
Это можно проверить и самому. Используя мой тестовый пример...
Ответить с цитированием
  #8 (permalink)  
Старый 27.05.2011, 04:46
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

Сообщение от Amphiluke
Вероятно, это баг IE из разряда вот таких.
именно:
#cnt_box {
	zoom: 1;
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отменить псевдокласс :hover hrundel Events/DOM/Window 7 04.12.2010 06:20
Изменение стиля родительского элемента при :hover дочернего lanzs Элементы интерфейса 2 16.10.2010 13:28
Странное поведение replace cooli0 Общие вопросы Javascript 4 25.01.2010 17:16
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 23:24
:hover в CSS kostik_y2k jQuery 2 30.03.2009 02:36