Неправильно отображается всплывающее меню

Vcool · December 23, 2008

Здравствуйте!

Товарищи, больше сил нет, с 11 вечера сижу - и никак не получается....Позиционированием пробовал, пробовал выравнивать - не получается....А самое обидное что в ФФ работает, только осел не воспринимает....

В чем собственно проблема - выпадающее меню сделал через css и списки. Но главный пункт - у него является картинка, при наведении на которую и должно всплывать меню. Но в ФФ все работает идеально, а в ИЕ меню раскрывается не вниз, а влево, и уже сил просто нет, что только не продовал - ничто не помогает....

Если сделать первый пункт ссылкой вида

<li><a href="/"><img src="menu1.gif" border="0"></a>

То в ИЕ тоже начинает вниз открываться, но появлется масса глюков(какя-то полоска в ИЕ), всю картинку начинает подсвечивать блоком, картинка немного сьежает.

Я только начал изучать html и многое не знаю, по-этому, если вам показался мой вопрос банальным - не извольте кричать, т.к. все мы когда-то были новичками...

Спасибо!!!

Вот само меню

http://kp-k.com/menu1.html

Vlad · December 23, 2008

position: absolute убери.

Vcool · December 23, 2008

Vlad

Бог CSS, мой низкий поклон. Спасибо, все заработало )

Vcool · December 23, 2008

Вот по ходу возник еще один глюк ИЕ. Неправильно высчитывается конец блока.

Вот так ситуация выглядит в ФФ

А так в ИЕ

Вот код которые за это должен отвечать

#nav li li a {
  width: 137px;
  background: none;

Если ставлю width - 157(как ширина всего всплывающего подменю) то в ИЕ начинает нормально отображаться, а в ФФ - начинает на 20px перелазит за ограничение колонки

Вот само меню

http://kp-k.com/menu1.html

Вoт весь код css

#nav, #nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  float: left;
  width: 100%;
}
#nav li {
  float: left;
  position: relative;
  background: #515151;
  back\ground: none;
}

#nav a {
  color: #fff;
  text-decoration: none;
  display: block;
  width: 120px;
  padding: 4px 10px;
  background: url(dot.png) repeat-y right;
}
#nav a:hover {
  color: #000;
  background: #ccc;
}
#nav li:hover,
#nav li.jshover {
  background: #333;
}

#nav li ul {
  display: none;
  position: none;
  background: url(fone-tr.png);
  padding: 8px 0;
  width: 157px;
}
#nav li li a {
  width: 137px;
  background: none;

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

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

Edited December 23, 2008 by Vcool

rash · December 23, 2008

Попробуйте такой доктайп:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

Vcool · December 23, 2008

rash

Да заработало...Хм...а не подскажите что скрывает сий заголовок дивной силы? )

Спасибо огромное

kalyaka-malyaka · December 23, 2008

rash
Да заработало...Хм...а не подскажите что скрывает сий заголовок дивной силы? )
Спасибо огромное

вот тут подробненько: http://htmlbook.ru/html/!doctype.html

Edited December 23, 2008 by kalyaka-malyaka

rash · December 23, 2008

rash
Да заработало...Хм...а не подскажите что скрывает сий заголовок дивной силы? )
Спасибо огромное

В двух словах — у вас был указан неполный доктайп (без ссылки на DTD), а при таком доктайпе браузеры находятся в Quirks Mode («режим причуд»), а в этом режиме IE неправильно рассчитывает размеры блоков.

Добавив ссылку на dtd мы заставили браузеры переключиться в стандартный режим, при котором размеры блоков рассчитываются более-менее одинаково.

Vcool · December 23, 2008

Кстати, прикрутил меню к странице, начал проверять его боеспособность и...оказалось что position: absolute;

Играла не последнюю роль.

Значит вот что получается если убрать его

Если оставить то в ФФ все работает как и нужно

Ну а в IE возвращается старая проблема.

Vlad · December 23, 2008

Для IE старый добрый хак можно использовать.

position: absolute;

_position: static; /* IE6 */

*position: static; /* IE7 */

Vcool · December 23, 2008

Не помогает...

В IE - начало отображатясь вниз, но сдвигает основную страницу а не открывается поверх

Вот сама страница

http://kp-k.com/index-2.html

Vcool · December 24, 2008

неужели ситуация безысходна?

yopopt · December 24, 2008

В #nav li, #nav, #nav ul попробуйте убрать float: left; position: relative;. Смысла в них нет.

Sign In

Неправильно отображается всплывающее меню

Question

Link to comment

Share on other sites

12 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

Join the conversation

Обсуждения

Important Information