Раздражающие проблемы css в IE7

Question

Отлично работает в FF, Opera и Chrome. Но, конечно, это не работает нормально в IE7. У меня есть элементы списка высотой 73 пикселя с красной рамкой (всего 75 пикселей в высоту).

Но я получаю нежелательное пространство между каждым элементом списка. Я триде установил отступы и поля на 0 для <ul> и <li>, но безрезультатно.

Здесь вы видите результат.

css f ** up в IE http://stiengenterprises.com/download/tmp/css_stuff.jpg

А вот и мой CSS:

//<ul with id="articleRotatorList">
#articleRotatorList {
    width: 250px;
    float: left;
    background: #f1f1f1 url(/img/bg/bg_articleRotatorStripe.png) repeat-y left;
}

#articleRotatorList li {
    height: 73px;
    font-size: 0.90em;
    border: 1px solid red;
}

Как убрать пробел между элементами списка?

ОБНОВЛЕНО Добавлен исходный код HTML:

<ul id="articleRotatorList">

                <li id="article_3303">
                    <div class="border"/>
                    <div class="content">
                        <a title="Svangerskap" href="/en/PROSJEKTER/Fersking/Svangerskap/">
                        <h2>Svangerskap</h2>
                        Lorem Ipsum is simply dummy text of the printing a... 
                        </a>
                    </div>    
                </li>

                <li id="article_3293">
                    <div class="border"/>
                    <div class="content">
                        <a title="Første leveår" href="/en/PROSJEKTER/Fersking/forste_leveaar/">
                        <h2>Første leveår</h2>
                        Lorem Ipsum is simply dummy text of the printing a... 
                        </a>
                    </div>    
                </li>

                <li id="article_3320">
                    <div class="border"/>
                    <div class="content">
                        <a title="Barnesykdommer" href="/en/PROSJEKTER/Fersking/Barnesykdommer/">
                        <h2>Barnesykdommer</h2>
                        Lorem Ipsum is simply dummy text of the printing a... 
                        </a>
                    </div>    
                </li>

            </ul>

и вот CSS для границы / содержимого div:

#articleRotatorList .border {
    width: 20px;
    height: 100%;
    float: left;
}

#articleRotatorList .content {
    width: 210px;
    height: 65px;
    padding: 5px 5px 5px 10px;    
    float: left;
}

Answer 1

Это вызвано тем, что font-size меньше 1em. Вам нужно немного увеличить line-height. Начните с 1.10em:

#articleRotatorList li {
    height: 73px;
    font-size: 0.90em;
    line-height: 1.10em;
    border: 1px solid red;
}

Answer 2

Как предположил BalusC, это, скорее всего, проблема размера шрифта / высоты строки, однако я полагаю, что вы можете добиться успеха, установив значение 0 в теге ul и повторно инициализировав их в теге li. Да, это отстой.