Немного съезжает текст в IE.

[kmaroff]

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

вот как должно быть и как отображается в Google Chrome:

А вот как обображается в IE.

"Моська" - статический элемент, а вот " - название раздела" добавляется автоматически, в зависимости от раздела в котором находимся. Так вот почему так смещается текст и как это смещение убрать? Заранее спасибо.

вот сайт snobstore.ru

Edited March 22, 2012 by kmaroff

[wildhind]

Позже выложу код css и кусок html.

не надо.

Лучше ссылку на страницу

[kmaroff]

wildhind

Туплю)

вот сайт snobstore.ru

[wildhind]

Ох ёлки зелёные!

Да там всё очень сильно запущено

Есть у вас понимание, почему без дурацкого отрицательного маргина Моська оказывается справа, а не слева, где ожидалась?

В общем, пробую описать проблему с самого начала.

Для #menu задана высота 33px. Ровно столько места занимает в потоке этот элемент. Следующий за ним, #logo, будет искать для себя место именно там, где заканчивается #menu, через 33px после его начала.

Внутри #menu размещён элемент #menu1 высотой 35px. Поскольку overflow для #menu не задан, используется значение по умолчанию: visible. То есть, все элементы, выходящие за пределы своих родителей, отображаются и занимают положенное им место.

Элемент #menu1 занимает ещё 2 пикселя ниже #menu.

#menu1 сожержит в себе только плавающие элементы li. Ширина их зависит от шрифта, который в свою очередь зависит от браузера, ОС, настроения пользователя или антициклона на Альфе Центавра. То есть, эту ширину смело можно считать слабопредсказуемой.

И вот после этой слабопредсказуемой ширины располагается ваше лого.

А вы его пытаетесь сдвинуть на строго заданное количество пикселей. Закономерно результат разнится в зависимости от браузера.

А если контент-менеджер потом добавит ещё один пункт меню? Вот он удивится!

Не надо ничего никуда сдвигать.

Меню должно занимать своё место, отведённое ему в потоке, и не вылезать из него.

В вашем случае достаточно убрать высоту для #menu и #menu1, а для #menu1 задать overflow:hidden. Тогда высота меню будет задаваться автоматически на основе высоты входящих в него элементов, за пределы меню никаких плавающих элементов выходить не будет, а следующий за меню элемент будет находиться на вполне ожидаемом месте.

И станет очевидна совершенная ненужность лишней обёртки div#menu для вашей менюшки.

Делайте проще.

[kmaroff]

wildhind

посоветуйте что подправить или как вообще по другому сделать, надо что бы " - название раздела" шли посте моська сразу. Я запутался конкретно. голова не думает уже)..пару дней экспериментирую и никак, видимо ещё пока не думаю языком css, некоторые вещи подбирались не как надо, а методом тыка)

[wildhind]

http://jsfiddle.net/kVzLA/ — это имелось в виду?

[kmaroff]

Изменил как Вы и посоветовали, все стало на свои места и корректно отображается теперь, но перестало выпадать меню)это можно увидеть в разделе "новости" или "гостевая книга"..как теперь сделать что бы и меню Выпадало как раньше?)

Edited March 27, 2012 by kmaroff

[kmaroff]

ап

[alexandr_v-vich]

Не по теме заметил. У вас кучи элементов с одинаковыми id - используйте классы

[wildhind]

сударь, голову включать.

Почему перестало выпадать? Firebug что говорит?

Что оно должно отображаться, но выпадает за пределы родителя, которому задан overflow:hidden? А что это свойство делает?

В первую очередь, основное назначение его каково?

Здесь использовано оно ради побочного эффекта без учёта основного так как не предполагалось, что меню будет выпадающим.

Ради какого побочного эффекта? чем можно заменить так, чтобы не обрезало выпадающие подменюшки?