Проблемы с CSS во всех браузерах

#css

Вопрос:

Я пытаюсь добавить значки социальных сетей в нижний колонтитул canopyco.com , но у меня возникли трудности с CSS.

Вот мои проблемы:

Значки выровнены правильно в Chrome и Safari, но в IE и FF это не так. Это связано с тем, что в IE и FF текст ссылки в нижнем колонтитуле больше, чем в Chrome и Safari, поэтому поля, которые я настроил для значков, не работают. Значки должны располагаться на одном уровне с левой стороной навигационных ссылок нижнего колонтитула.
Когда я размещаю значки в нижнем колонтитуле, каким-то образом icons div закрывает текст навигационных ссылок нижнего колонтитула.

Я все еще довольно новичок в CSS, так что я надеюсь, что кто-нибудь здесь сможет меня направить. Я не хочу публиковать код здесь, в вопросе, так как существует МНОГО CSS и HTML, которые необходимо учитывать при рассмотрении ошибок.

1. Или скриншоты, или общедоступный демонстрационный сайт помогли бы.

2. Я поместил ссылку на живой сайт в первой строке вопроса. Я не могу опубликовать код здесь, поскольку, похоже, при этом нарушается форматирование сайта.

3. Если я проверю ваш сайт в FF с помощью дополнения Firebug (<< рекомендуется для отладки css) и отключу поля для отдельных элементов IMG (26x20px) в UL с id =»footer_icons», то, похоже, именно они вызывают положение off. Надеюсь, это поможет вам в отладке. (отредактировано: перенесено в комментарий к первоначальному сообщению, это не совсем ответ)

Ответ №1:

После проверки вашего html, вот что вам следует сделать:

Избавьтесь от height в навигационном колонтитуле и установите overflow на hidden

 #footer ul#footer_nav {
 margin-top: 23px;
 float: right;
 text-align: right;
 overflow: hidden;
}

Также избавьтесь от height значков в нижнем колонтитуле и установите overflow на hidden

 #footer ul#footer_icons {
 margin-top: -3px;
 float: left;
 text-align: left;
 width: 200px;
 margin-left: -2px;
 overflow: hidden
}