Выпадающее меню при помощи CSS (проблема с IE8)

[JokerVilli]

Добрый день. Я сделал выпадающее меню при помощи CSS по шаблону, изменив цвет ячеек и стиль текста. В Opera и Firefox всё нормально, а вот в IE8 горизонатльное меню почему то становится вертикальным (ячейки находятся одна под другой) и при этом текст не имеет никакого оформления (пришлось отдельно прописывать стиль внутри условных комментариев). Очень надеюсь на вашу помощь, так как сам не пойму где ошибка. Вот прикрепленные файлы:

http://files.mail.ru/MKCEN4

http://files.mail.ru/4POIRC

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

Спасибо за внимание!

[Ivan-D]

JokerVilli, привет! Давай потихоньку разбираться с кодом..

Насчёт проблемы могу вот что сказать.. У меня лично вообще почему-то в IE8 горизонтальная выпадающая менюшка работает хорошо, а в Opere и Chrome не хочет вообще появляться на странице! =) Я попробую помочь, заинтересовало млин! =)

PS: В IE7 такая проблема, не в IE8! =)

Насчёт всего остального, так вот:

1) Код JavaScript проще, мне кажется, стоит поместить в отдельный файл *.js так как страница слишком нагружена! Тоже хочу посоветовать и для css_style-оформления!

2) Посоветую также проверить валидность HTML-кода утилитой tidy! Подправить код и запустить страницу во всех браузерах и отписаться!

Также отпиши, что конкретно ты изменил на что и в каком css-стиле? Т.е. приведи кусок кода - до и после.

[JokerVilli]

Привет! Спасибо за отзыв!

И спасибо за поправку (я то думаю почему никто не отвечает!). Действительно проблема с IE7, однако вопрос остается тем же - как от неё избавиться! =(

Опера у меня версии 9.5 - там всё нормально, Firefox - 3.0.15 - там тож всё гуд. В хроме не проверял, не знаю как там..

Всем остальным твоим советам я последовал и HTML Tidy тож установил, исправил все недочеты, но что забавно, что в комментарии он пишет что по структуре документ всё равно больше похож на transitional, чем на strict. Ну да это пока не так важно.

Повторюсь, что главная проблема остается за IE7. И да, кстати, выпадающее меню я делал вот по этому шаблону: http://www.alexilin.ru/web/menu/nojshormenu/ - соответсвенно можешь видеть что я там изменил.

Сижу вот как последний оболтус и жду помощи со стороны )))

[Ivan-D]

Чувак, ну что я могу сказать.. С проблемой я разобрался! =) Спасибо мне! =) Значит смотри, вот у тебя главное описание класса для всего меню: длина, ширина и т.д.:

.menu{
	width:112px;
	height:100px;
	position:relative;
	font-size:50px;
	z-index:100
}

Это меню состоит из блоков, каждый блок по 105px:

.menu ul li:hover ul{
...
width:105px;
}

И общее кол-во блоков меню у тебя 5, следовательно длина всего меню должна быть как минимум - (5*105)px! Значит итоговое решение, в свойстве класса .menu - width, указать общую длину 525px, чтобы все блоки поместились:

.menu{
	width:525px;
	height:100px;
	position:relative;
	font-size:50px;
	z-index:100
}

Но, ещё пару пикселей длины могут забирать бордюры, например: border: 2 px black; и подобные конструкции, в связи с этим общая длина меню должна дополнительно быть увеличена! В итоге, рабочая длина твоего меню должна быть - 530px! После указания для меню новой длины все основные браузеры стали отображать его правильно!

PS: Также посоветую использовать так называемое - модульное тестирование! Что это такое? Описание этого метода можно найти с помощью гуглика! =) В web-программировании это делается вот каким способом: создаётся новая html-страница и по кусочкам - блокам переносится весь код с проблемной страницы! После каждого переноса новая страница просматривается в браузере. Чем на большее кол-во блоков кода разделить проблемную страницу, тем быстрее найдёться тот блок, в котором скрыта ошибка! Советую, в дальнейшем, применять этот метод отладки и тестирования html-кода!

Edited November 21, 2009 by Ivan-D

[JokerVilli]

Да! Ты чертовски прав - СПАСИБО ТЕБЕ! =)

Блин, проблема то на самом деле вообще несерьезная, причем я помнится предполагал, что возможно ячейки не укладываются в блок и варьировал ширину, но походу какую-то не ту...

Про модульное тестирование посмотрю, спасибо за наводку.

[Ivan-D]

  Quote

Да! Ты чертовски прав - СПАСИБО ТЕБЕ! =)

Да не за что! =) Это приходит с опытом, не переживай! Задавай такие же не менее интересные задачки мне, помогу чем смогу! Я люблю такие штуки! =) Это моя слабость! =) Да и само меню мне тоже понравилось! Сам его тоже параллельно стал шлифовать под себя! =)

  Quote

что в комментарии он пишет что по структуре документ всё равно больше похож на transitional, чем на strict.

Тут надо пожалуй разъяснить немного.. По идее, тип - strict означает - строгий, т.е. требует жесточайшего подчинения правилам текущей спецификации языка разметки. Всё верно тебе сообщила утилитка! Код твоей страницы, во многих местах, реализован не должным образом, а с большим кол-вом противных неточностей, которые не сочитаются со стандартом HTML 4.01! А тип transitional как раз и не требует строгого написания, он более лоялен к ошибкам. Но это также сообщается браузеру, который в зависимости от строгости выбирает соответствующий рендер, который будет генерировать итоговую страницу! Эта итоговая страница в финале может выглядеть не совсем так, как хотел бы программист! В этом вся и загвоздка.

Что strict даёт в итоге? Браузер, если натыкается на объявленный тип генерации - strict, строго генерирует страницу в соответствии со стандартом и если находится какая-нибудь неточность в коде, то браузер просто не открывает эту страницу или конкретный элемент конструкции: div, table и т.д. Что, естественно, говорит программисту о том, что стандарт не соблюдён и нужно проверить код элемента или страницы в целом!

Edited November 21, 2009 by Ivan-D

[dfg]

сори не туда

Edited June 25, 2010 by dfg