CSS box/ul menu

Question

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

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

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

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

Мой URL является: http://homeweb.mah.se/~M09K0291/123789/Lab7/

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

Answer 1

Каждый браузер имеет свой собственный набор значений по умолчанию для поля, заполнения, интервала и т. Д. Именно поэтому большинство различий исходит из CSS. Рассмотрим using a reset stylesheet за весь ваш сайт. Это должно дать вам общую базовую линию, которую должны подтвердить все браузеры. Если вы не хотите или не можете позволить установить сброс 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

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

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

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