CSS-окно/ul-меню

Question

У меня серьезные проблемы с правильной работой CSS.Во всех трех браузерах, которые я использую (Chrome, IE и FF), он выглядит по-разному.

Теперь к вопросу: я пытался скопировать пример со следующего URL:http://www.alistapart.com/articles/taminglists/Просто прокрутите почти до самого низа и найдите «В реальном мире» и синее меню.

Я реализовал это меню, но не могу заставить работать пользовательские изображения (я использую собственное изображение)

Он отлично работает в Chrome, и тогда я получаю тот вид, который мне нужен.В IE я получаю поле в левой части меню, где находится изображение, и изображение находится внутри этого поля?а в FF изображения располагаются над текстом и создают забавный вид (также на полях).

Мой URL-адрес:http://homeweb.mah.se/~M09K0291/123789/Lab7/

Я пытался добавить отдельную таблицу стилей для IE и снова удалил отступы/поля, но это не сработало.Мне нужен результат, который производит Chrome.

Answer 1

Каждый браузер имеет свой собственный набор значений по умолчанию для полей, отступов, интервалов и т. д.Вот откуда большая часть различий в CSS.Учитывать использование таблицы стилей сброса для всего вашего сайта.Это должно дать вам общую основу, которую должны признать все браузеры.Если вы не хотите или не можете позволить себе устанавливать сброс CSS для всей таблицы стилей, сделайте хотя бы один для своего меню.

Сделайте это первым правилом вашего меню, а затем определите любые другие стили меню после этого:

/* This example assumes your menu is contained 
   in a <div /> with an ID of "menu" */
div#menu, div#menu ul, #menu li, ul#menu a
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    line-height: 1;
    list-style: none;
}

Это должно решить большинство ваших проблем.

Answer 2

Проблема может заключаться в том, как разные браузеры создают списки:либо с отступами, либо с полями в элементах списка.

Если вы удалите позиция в стиле списка правило и задайте поле слева в 32 пикселя. ли тег, вы увидите галочку, по крайней мере в Firefox, расположенную так, как описано.Расширение Firebug отлично помогает в диагностике подобных проблем.

Сброс таблицы стилей также поможет вам обеспечить единообразие в том, как браузеры обрабатывают стили (как правильно указано в более быстром ответе).