Номера в нумерованном списке не отображаются в нужных местах в IE7

Question

IE7 не показывает номера нумерованного списка в правильных позициях. Я настроил номера с позицией relative. В IE8 и IE9 числа отображаются правильно.

Это CSS:

#thumbs li p{
    text-align:center;
    color: #333;
    position: relative;
    top: -9px;
    right: -7px;
    float:left;
}

И HTML это:

    <div id="thumb_caixa">
        <p>Clica per veure més imatges</p>
        <ul id="thumbs">
            <li class='active' rel='1'><p>1</p></li>
            <li class='active' rel='2'><p>2</p></li>
            <li class='active' rel='3'><p>3</p></li>
            <li class='active' rel='4'><p>4</p></li>
        </ul>
    </div>
</div>

URL сайта с проблемой: http://abs.marcmorales.es/index.php?i=1&s=5&p=11

Где проблема?

Answer 1

Есть несколько вещей, которые я бы изменил по этому поводу:

• Избавьтесь от тега p. Это лишнее.
• Измените #thumbs li, чтобы не было background-image, но вместо background-color.
• Добавьте отступ к #thumbs li, чтобы числа были по центру.
• Добавить color.

Answer 2

Вам действительно нужно использовать позиционирование для центрирования тега p?

Полагаю, это тоже будет хорошо:

#thumbs li p {
    text-align:center;
    color: #333;
    margin: 0;
    line-height: 20px;
}