Помогите пожалуйста с CSS Меню в IE

Luminar · October 28, 2010

Всем привет! Подскажите, пожалуйста, отчего в Интернет Эксплорере верхнее выпадающее меню (на CSS) отображается не корректно? Все время съезжает на соседнюю справа ячейку.

(В опере и FF все ок).

http://perfect-human.ru/cms/

Код CSS:

<style type="text/css">

#nav, #nav ul {
  list-style: none;
  margin: 0;
  padding: 0;}


#nav li {float: left;
  position: relative;
  background: #515151;
  back\ground: none;}

#nav a{
	color: #000;
	text-decoration: none;
	display: block;
	width: 126px;
	height: 24px;
	padding-top: 8px;
	text-align: center;
	font:14px  "Times New Roman", Times, serif;
	background: url(../img/dark.gif);}

#nav a:hover {color: #fff; background: url(../img/light.gif);}

#nav li ul {
  display: none;
  position: absolute;
  background: url(../img/menu.gif);
  text-align: center;
  font:14px  "Times New Roman", Times, serif;  
  width: 126px;}

#nav li li a {
  width: 126px;
  background: none;}

#nav li:hover ul,
#nav li.jshover ul {
  display: block;}

</style>

Код ниже вставлен в ячейку таблицы:

<table width="1263" style="background:url(../img/fon.jpg)">
  <tr>
<td width="126">
<UL id=nav><LI><A href="#null">Торжество Духа</A><UL>
<LI><A href="#null">Суперсознание</A> </LI>
<LI><A href="#null">Дух-Душа-Сознание</A></LI>
<LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI>
</UL></LI></UL>
</td>
<td width="126">
<UL id=nav><LI><A href="#null">Искусство Магии</A><UL>
<LI><A href="#null">Тольтекская магия</A> </LI>
<LI><A href="#null">Психическая магия</A></LI>
<LI><A href="#null">Белая магия</A></LI>
<LI><A href="#null">Черная магия</A></LI>
<LI><A href="#null">Магия Прорицания</A></LI>
<LI><A href="#null">Природная магия</A></LI>
<LI><A href="#null">Магия Кундалини</A></LI>
<LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI>
</UL></LI></UL>
</td>
<td width="126">
<UL id=nav><LI><A href="#null">Контроль Энергии</A>
<UL>
<LI><A href="#null">Тонкие тела</A> </LI>
<LI><A href="#null">Экстрасенсорика</A> </LI>
<LI><A href="#null">Набор Энергии</A></LI>
<LI><A href="#null">Дыхание</A></LI>
<LI><A href="#null">Йога</A></LI>
<LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI>
</UL></LI></UL>
</td>
<td width="126">
<UL id=nav><LI><A href="#null">Ключ Подсознания</A>
<UL><LI><A href="#null">Интуиция</A> </LI>
<LI><A href="#null">Аутотренинг</A></LI>
<LI><A href="#null">Творчество</A></LI>
<LI><A href="#null">Программы</A></LI>
<LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI>
</UL></LI></UL>
</td>
<td width="126">
<UL id=nav><LI><A href="#null">Мир Сновидений</A><UL>
<LI><A href="#null">Методики</A></LI>
<LI><A href="#null">Опыт</A></LI>
<LI><A href="#null">Дневники</A> </LI>
<LI><A href="#null">Карты снов</A> </LI>
<LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI>
</UL></LI></UL>
</td>
<td width="126">
<UL id=nav><LI><A href="#null">Широта Сознания</A><UL>
<LI><A href="#null">Память</A> </LI>
<LI><A href="#null">Восприятие</A> </LI>
<LI><A href="#null">Воля</A></LI>
<LI><A href="#null">Мышление</A></LI>
<LI><A href="#null">Воображение</A></LI>
<LI><A href="#null">Характер</A></LI>
<LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI>
</UL></LI></UL>
</td>
<td width="126">
<UL id=nav><LI><A href="#null">Власть и Влияние</A><UL>
<LI><A href="#null">Пикап</A> </LI>
<LI><A href="#null">НЛП</A> </LI>
<LI><A href="#null">Гипноз</A></LI>
<LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI>
</UL></LI></UL>
</td>
<td width="126"><UL id=nav><LI ><A href="#null">Совершенство Тела</A><UL>
<LI><A href="#null">Анатомия</A></LI>
<LI><A href="#null">Физиология</A></LI>
<LI><A href="#null">Здоровье</A></LI>
<LI><A href="#null">Бодибилдинг</A> </LI>
<LI><A href="#null">Атлетика</A></LI>
<LI><A href="#null">Гимнастика</A></LI>
<LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI>
</UL></LI></UL>
</td>
<td width="126">
<UL id=nav><LI><A href="#null">Доблесть Воина</A><UL>
<LI><A href="#null">Единоборства</A> </LI>
<LI><A href="#null">Оружие мира</A></LI>
<LI><A href="#null">Точки дзю-до</A></LI>
<LI><A href="#null">Самооборона</A></LI>
<LI><A href="#null">История битв</A></LI>
<LI><A href="#null">Яды</A></LI>
<LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI>
</UL></LI></UL>
</td>
<td width="126"><UL id=nav><LI><A href="#null">Улыбка Арлекина</A>
<UL><LI><A href="#null">Игры</A> </LI>
<LI><A href="#null">Развлечения</A></LI>
<LI><A href="#null">Эротика</A></LI>
<LI><A href="#null">Юмор</A></LI>
<LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI>
</UL></LI></UL></td>
</tr>
</table>

Edited October 28, 2010 by Luminar

Luminar · October 28, 2010

И еще там проблема в правом блоке меню - под строенной таблицей "Популярные темы" возникает промежуток, который никак не убрать.

Заранее всем спасибо!

Edited October 28, 2010 by Luminar

Luminar · October 28, 2010

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

d0ublezer0 · October 28, 2010

Просто вашу страницу нужно собрать из ваших кусков кода. А делать это в полдесятого вечера чета не хочется

Luminar · October 28, 2010

Да я всё понимаю. Я и сам не люблю напрягать людей без толку... Буду кумекать сам

d0ublezer0 · October 28, 2010

IE8 кстати нормально показывает.

одно могу сказать точно - несколько одинаковых ID на странице быть не может

Luminar · October 28, 2010

Я пробовал в IE7 - там выпадающие менюшки почему-то сползают в правую колонку... А IE<6 даже хувер не тянет... хотя без него можно и обойтись.

одно могу сказать точно - несколько одинаковых ID на странице быть не может

А как тогда присвоить правила заданные в стилях?

Edited October 28, 2010 by Luminar

d0ublezer0 · October 28, 2010

да, в 7 слетает

а что мешает присвоить стили через класс?

Luminar · October 28, 2010

сек, сейчас попробую.

d0ublezer0 · October 28, 2010

Плюс, уберите оттуда таблицы. они там вообще ни к чему.

Luminar · October 28, 2010

а не все в порядке. забыл тег закрыть. Но все равно соскальзывает меню.

Edited October 28, 2010 by Luminar

d0ublezer0 · October 28, 2010

Поправьте у себя так:

.nav li ul {
	position: absolute;
	background: url(../img/menu.gif);
	text-align: center;
	font:14px "Times New Roman", Times, serif;
	width: 126px;
	left:0;
	display:none;
}

Вот полный код что у меня получилось (лишние пункт убрал, они в монитор не убирались)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
.nav, .nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav li {
	float: left;
	position: relative;
	background: #515151;
}
.nav a {
	color: #000;
	text-decoration: none;
	display: block;
	width: 126px;
	height: 24px;
	padding-top: 8px;
	text-align: center;
	font:14px "Times New Roman", Times, serif;
	background: url(../img/dark.gif);
}
.nav a:hover {
	color: #fff;
	background: url(../img/light.gif);
}
.nav li ul {
	position: absolute;
	background: url(../img/menu.gif);
	text-align: center;
	font:14px "Times New Roman", Times, serif;
	width: 126px;
	left:0;
	display:none;
}
.nav li li a {
	width: 126px;
	background: none;
}
.nav li:hover ul, .nav li.jshover ul {
	display: block;
}
</style>
</head>

<body>
<UL class=nav>
  <LI><A href="#null">Торжество Духа</A>
	<UL>
	  <LI><A href="#null">Суперсознание</A> </LI>
	  <LI><A href="#null">Дух-Душа-Сознание</A></LI>
	  <LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI>
	</UL>
  </LI>
</UL>
<UL class=nav>
  <LI><A href="#null">Искусство Магии</A>
	<UL>
	  <LI><A href="#null">Тольтекская магия</A> </LI>
	  <LI><A href="#null">Психическая магия</A></LI>
	  <LI><A href="#null">Белая магия</A></LI>
	  <LI><A href="#null">Черная магия</A></LI>
	  <LI><A href="#null">Магия Прорицания</A></LI>
	  <LI><A href="#null">Природная магия</A></LI>
	  <LI><A href="#null">Магия Кундалини</A></LI>
	  <LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI>
	</UL>
  </LI>
</UL>
<UL class=nav>
  <LI><A href="#null">Контроль Энергии</A>
	<UL>
	  <LI><A href="#null">Тонкие тела</A> </LI>
	  <LI><A href="#null">Экстрасенсорика</A> </LI>
	  <LI><A href="#null">Набор Энергии</A></LI>
	  <LI><A href="#null">Дыхание</A></LI>
	  <LI><A href="#null">Йога</A></LI>
	  <LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI>
	</UL>
  </LI>
</UL>
<UL class=nav>
  <LI><A href="#null">Ключ Подсознания</A>
	<UL>
	  <LI><A href="#null">Интуиция</A> </LI>
	  <LI><A href="#null">Аутотренинг</A></LI>
	  <LI><A href="#null">Творчество</A></LI>
	  <LI><A href="#null">Программы</A></LI>
	  <LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI>
	</UL>
  </LI>
</UL>
<UL class=nav>
  <LI><A href="#null">Мир Сновидений</A>
	<UL>
	  <LI><A href="#null">Методики</A></LI>
	  <LI><A href="#null">Опыт</A></LI>
	  <LI><A href="#null">Дневники</A> </LI>
	  <LI><A href="#null">Карты снов</A> </LI>
	  <LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI>
	</UL>
  </LI>
</UL>
<UL class=nav>
  <LI><A href="#null">Широта Сознания</A>
	<UL>
	  <LI><A href="#null">Память</A> </LI>
	  <LI><A href="#null">Восприятие</A> </LI>
	  <LI><A href="#null">Воля</A></LI>
	  <LI><A href="#null">Мышление</A></LI>
	  <LI><A href="#null">Воображение</A></LI>
	  <LI><A href="#null">Характер</A></LI>
	  <LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI>
	</UL>
  </LI>
</UL>
<UL class=nav>
  <LI><A href="#null">Улыбка Арлекина</A>
	<UL>
	  <LI><A href="#null">Игры</A> </LI>
	  <LI><A href="#null">Развлечения</A></LI>
	  <LI><A href="#null">Эротика</A></LI>
	  <LI><A href="#null">Юмор</A></LI>
	  <LI style="height:32px"><img src="../img/dark.gif" width="126" height="32" /></LI>
	</UL>
  </LI>
</UL>
</td>
</body>
</html>

Ну, тут есть тоже небольшой косяк. Но, думаю, вы справитесь.

Luminar · October 28, 2010

Да он на одном уровне выводит - вглубь первой менюшки. Спасибо за коррекцию и облегчение кода!!!

d0ublezer0 · October 28, 2010

Ну, с ходу могу посоветовать только добавить top:

.nav li ul {
	position: absolute;
	background: url(../img/menu.gif);
	text-align: center;
	font:14px "Times New Roman", Times, serif;
	width: 126px;
	left:0;
	top:32px; /* это высота вашего родительского LI */
	display:none;
}

Но тут один минус - если поменяете оформление (размер шрифта там или еще что, влияющее на высоту), то и отступ сверху тоже нужно будет поправлять.

По-другому че-то не придумывается уже.

Luminar · October 28, 2010

Все работает в лучшем виде! =) Я тоже подумал сразу на топ, но когда я ставил top:32 ничего не менялось =) а вы мне показали еще и "px" !

Век живи, век учись - а на мелочах все равно споткнешься... )) Спасибо огромное!

d0ublezer0 · October 28, 2010

Ну вообще, да, учиться никогда не нужно прекращать

Рад, что помог. Всего доброго.

Sign In

Помогите пожалуйста с CSS Меню в IE

Question

Link to comment

Share on other sites

15 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

Join the conversation

Обсуждения

Important Information