Что не так с моим кодом CSS?

Question

Следующий HTML-код хорошо выглядит в Chrome, но не очень хорошо выглядит в Firefox (расстояние между заголовком и ссылками не такое, как в Chrome) ... кто-нибудь, кто знает, как его оптимизировать?

Вот как это должно выглядеть (скриншот Chromium): http://i.imgur.com/R6DZk.png
Вот как это выглядит в Firefox: http://i.imgur.com/18SmK.png

Это код CSS:

        html, body {
        height: 100%;
        width: 100%;
        padding: 0px;
        margin: 0px;
    }
    body {
        background-image: url(background.png);
        background-repeat: repeat;
        background-position: top left;
    }
    #main {
        font-family: 'Raleway', sans-serif;
        position: absolute;
        left: 190px;
        top: 240px;
        font-size: 26px;
    }
    #title {
        position: absolute;
        left: 180px;
        top: 110px;
        font-family: 'Vollkorn', serif;
        font-size: 26px;
    }
    a:link, a:visited {
        text-decoration: none;
        font-family: 'Raleway', sans-serif;
        color:  #000000;
    }
    a:hover {
        text-decoration: underline;
    }
    ::-moz-selection { 
        background: #fe57a1; 
        color: #fff; 
        text-shadow: none;
    }
    ::selection { 
        background: #fe57a1; 
        color: #fff; 
        text-shadow: none; 
    }

Это HTML-код:

    <div id="title">
    <h1>Title</h1>
</div>
<div id="main">
    <ul>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    </ul>
</div>

Ну, лично я думаю, что было бы легче поместить заголовок в основной раздел:

<div id="main">
<h1>Title</h1>
    <ul>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    </ul>
</div>

и затем в css:

h1 { font-family: 'Vollkorn', serif; font-size: 26px; font-weight: bold; }

Но это не работает так, как должно: /

Answer 1

На моей машине я не вижу никакой разницы в расстоянии между названием и телом между chrome и firefox, но я использую IE. Итак, я добавил дополнительный стиль CSS для тега h1.

h1 {
padding: 0px;
font-family: 'Vollkorn', serif; 
font-size: 26px; 
}

Похоже, что интервал будет более последовательным.

Answer 2

Вы должны удалить отступы и поля для элементов UL, установив их в ноль.

ul{
  margin:0;
  padding:0;
}

Вы также можете использовать коды сброса CSS, чтобы легко получить то же представление в большинстве браузеров.

Answer 3

Это может быть проблема высоты строки. попробуйте установить высоту строки в заголовке и главном разделе.