CODEWITHSUNDEEP
htmlcss
Steven
Steven

Reputation: 19425

Annoying css problems in IE7

It works fine in FF, Opera and Chrome. But of cours it's not working ok in IE7. I have list items which is 73px high, with a red border (a total of 75 px in height).

But I get an unwanted space between each list item. I've tride setting padding and margin to 0 for both <ul> and <li>, but to no wain.

Here you see the result.

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

And here is my 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;
}

How can I remove the space between the list items?

UPDATED Added HTML source code:

<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>

and here is the css for the border / content divs:

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

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

Upvotes: 0

Views: 183

Answers (2)

Aaron
Aaron

Reputation: 4614

As BalusC suggested, this is most likely a font-size/line-height issue, however I believe you may find success by setting both to 0 on the ul tag, and re-initializing them on the li tag. Yes, it sucks.

Upvotes: 0

BalusC
BalusC

Reputation: 1108722

This is caused by the font-size being smaller than 1em. You need to increase the line-height a bit. Start with 1.10em:

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

Upvotes: 2

Related Questions