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

Expand|Select|Wrap|Line Numbers

 
<ul>

<li>

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

</li>
 
</ul>

Expand|Select|Wrap|Line Numbers

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

Expand|Select|Wrap|Line Numbers

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

IE - Working with lists and gaps

re: IE - Working with lists and gaps

re: IE - Working with lists and gaps

re: IE - Working with lists and gaps

re: IE - Working with lists and gaps

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about