vlasenkov

Проблему решил. У меня было меню сделанное из списка. Поднималось меню с помощью margin-top, но в ИЕ при поднятии одного списка, поднимались все. Решил таким способом. Сначала поднимал все меню целиком и опускал все списки, потом запускал анимацию по подъему одного. Конечно звучит ужасно, но зато работает. По крайней мене лучшего варианта при текущей верстке я не нашел. Всем спасибо.

Здравствуйте. Нуждаюсь в помощи, просто не знаю что делать. Есть сайт - http://s16.ru/test/ в ИЕ8 возникают проблемы с верхним, главным, меню. При нажатии на пункт поднимаются все, которые идут до него, в чем проблема понять не могу. Причем в ИЕ7,9 все нормально. Вторая проблема это не подключение шрифта в ИЕ7,8, пишет такую ошибку : "CSS3111: В @font-face обнаружена неизвестная ошибка. myriadpro.eot" Буду очень признателен, если подскажете.

Сделал по-другому: CSS @font-face { font-family: 'MyriadPro'; src: url('fonts/myriadpro.eot'); src: local('?'), url('fonts/myriadpro.woff') format('woff'), url('fonts/myriadpro.ttf') format('truetype'), url('fonts/myriadpro.svg') format('svg'); font-weight: normal; font-style: normal; } Стало работать, но в чем был корень проблемы не понял. Если кто подскажет, буду благодарен.

С этой штукой благодаря вам я разобрался. Возникла другая проблема, решил другую тему не создавать и продолжить эту. Необходимо сделать нестандартный шрифт на том же сайте. http://s16.ru/test/ - по этому же адресу, я пытался это сделать. Скачал нужные шрифты и сделал объявление в css, но почему-то не получается. CSS @font-face { font-family: "MyriadPro"; src: url('fonts/myriadpro.eot'); src: url('fonts/myriadpro.eot?#iefix') format('embedded-opentype'), url('fonts/myriadpro.woff') format ('woff'), url('fonts/myriadpro.ttf') format ('truetype'), url('fonts/myriadpro.svg') format ('svg'); font-weight: normal; font-style: normal; } body { color: #5f5f5f; background: #fff; font-family: "MyriadPro"; font-size: 13px; padding: 0; margin: 0; } Почему-то шрифт не меняется. Может это и от настроек браузера зависит?

Большое спасибо, буду разбираться со всем этим.

Очень странно, но получилось. Правда у меня появился еще один вопрос. Сейчас я это сделал присвоив логотипу position: absolute, а можно ли это как-то сделать без абсолютного позиционирования, пробовал с отрицательным margin, но не получается, уходит под Карусель. Спрашиваю это, потому что, например, нужно сделать, чтобы меню было по центру, если это делать с абсолютным позиционированием, тогда центрировать его придется через JS, а хотелось бы без него. http://s16.ru/test/ - тут лежит пример. HTML <div class="header_slider"> <ul id="header-slider" class="jcarousel-skin-tango"> <li><img src="img/1.jpg" alt="" /></li> <li><img src="img/2.jpg" alt="" /></li> </ul> </div> <div class="header"> <div class="header_logo"> Logo </div> <div class="header_menu"> </div> </div> CSS .header { position: absolute; top: 0; left: 0; }

Т.е. вы имеете ввиду, что должен быть отдельный слой с каруселью и отдельный слой с логотипом и меню? Я так делал. Карусель в отдельном слое, дальше делал в другом слое логотип и меню и ставил position:absolute; но они уходили под Карусель. Пытался ставить разные z-index, но все тщетно.

Здравствуйте. Прошу помощи в одной проблеме. Допустим у нас в шапке есть слой, в катором расположена Карусель (эта карусель работает через overflow: hidden, естественно), и теперь мне поверх этого слоя нужно сделать еще один слой: с меню или логотипом, например. И тут возникает проблема, что этого не получается сделать. Пробовал присваивать и абсолютное позиционирование, и z-index и отрицательные margin все равно слой с логотипом или меню попадает под слой с Каруселью. Сталкивался ли кто-нибудь с такой проблемой и можно что-то с этим поделать? Пример картинка, то что должно получится (1.Слайдер, должен находится под 2.Логотип и 2.Меню):

Неплохое решение спасибо большое, а я все в лоб пытался

Вот я пробовал через него это делать, т.е. выпадающий список загонять по <a>, но все равно не получается. Все равно спасибо, что отозвались, буду дальше геммороиться.

Спасибо, за ответ. Но получается немного не то. У меня список со ссылкой фиксированной ширины (допустим 500), а всплывающий слой должен быть шириной с текст в этом списке. Получается когда я задаю размер списка, то уже не так - http://jsfiddle.net/v86LF/2/

Здравствуйте! Прошу прощения, если пишу не туда, довольно срочная проблема. Есть слой, в котором ссылка, при наведении на эту ссылку появляется дополнительный слой (что-то вроде выпадающего меню). Выпадающее меню имеет определенную ширину (в зависимости от длины текста и т.д.), мне очень надо сделать, чтобы ширина этого выпадающего слоя была равна ширине ссылки, при наведении на которую появляется это меню. Пробовал разные пути, сейчас остановился на этом. Нахожусь в абсолютном тупике. Буду благодарен за помощь. <style type="text/css"> .cat-list_parts_link { float: left; width: 150px; padding: 0 5px 20px 10px; } .cat-list_parts_link a { font-size: 14px; } .cat-list_parts_link-subdiv { display: block; position: absolute; z-index: 100; background: yellow; list-style: none; margin: 0; padding: 0; } .cat-list_parts_link:hover a { background: yellow; } .cat-list_parts_link:hover .cat-list_parts_link-subdiv { display: block; } </style> <div class="cat-list_parts_link"> <div style="width: auto;"> <a href="#">Пункт 1</a> <ul class="cat-list_parts_link-subdiv"> <li><a href="#">Подпункт 1</a></li> <li><a href="#">Подпункт 2</a></li> <li><a href="#">Подпункт 3</a></li> <li><a href="#">Подпункт 4</a></li> <li><a href="#">Подпункт 5</a></li> </ul> </div> </div> <div class="cat-list_parts_link"> <div style="width: auto;"> <a href="#">Пункт 2, и еще текстик</a> <ul class="cat-list_parts_link-subdiv"> <li><a href="#">Подпункт 1</a></li> <li><a href="#">Подпункт 2</a></li> <li><a href="#">Подпункт 3</a></li> <li><a href="#">Подпункт 4</a></li> <li><a href="#">Подпункт 5</a></li> </ul> </div> </div> <div class="cat-list_parts_link"> <div style="width: auto;"> <a href="#">Пункт 3, немного</a> <ul class="cat-list_parts_link-subdiv"> <li><a href="#">Подпункт 1, тут побольше</a></li> <li><a href="#">Подпункт 2</a></li> <li><a href="#">Подпункт 3</a></li> <li><a href="#">Подпункт 4</a></li> <li><a href="#">Подпункт 5</a></li> </ul> </div> </div> На картинке показан пример, красные линии, это какая ширина должна быть.