IE - Working with lists and gaps

[DevInCode]

In IE (7 and 8 are my concern) I have some list items that are more than one line. I'm not sure if this is what causes it but my lists have large gaps between them. It looks horrendous.

Anybody know a work around?


this is my css and html

<ul>
<li>
<a href="my.html">Testing Link</a>
</li>
 
</ul>
 

#leftpane ul
{
    padding:0px;
    margin:0px;
    list-style:none;
}
#leftpane ul li
{
    padding:0px;
    margin:0px;
}
#leftpane ul li a
{
    display:    block;
    font-size:    90%;
}
#leftpane ul li a:hover
{
    display:    block;
    background:    #EAEAEA;
}
 
 
 

[jhoborg]

When you choose to use "display:block" on your elements it puts a line break before and after the element, so I think that is what's causing your list items to be more than one line.

[DevInCode]

I need them block so the width words properly on the mouseover. maybe I should include a clear... I don't really know.

[jhoborg]

Are you declaring your doctype? If not that might be the reason why it's adding unwanted space in IE.

You could also try adding "width:100%;" to the "a" elements. Assuming of course that works for your layout and what you are trying to accomplish. Like so:

#leftpane ul li a
{
    display:    block;
    font-size:    90%;
    width:100%;
}
#leftpane ul li a:hover
{
    display:    block;
    background:    #EAEAEA;
    width:100%;
}
 

[DevInCode]

The doc type is declared. Add 100% width fixed the problem, at least in IE8. Thanks kindly!