Ie prob: element height

HTML & CSS
1

hi,

http://mayacove.com/dev/ie6/test_nav.html

am having prob with IE6, it’s giving either <li> or <a> more height than it should; I have run into this problem before, I usu. solve by adding overflow:hidden to element for IE6, but it’s not working in this instance…
it’s hard to trouble-shoot because when I put borders around either <a> or <li> elements problems goes away (so I don’t even know whether IE6 is adding height to <a>'s or <li>'s…)

I cannot give either <li>'s or <a>'s specific heights (even just for IE6) because some of the links will be one line long, some will be two lines long, and some will be three lines long…

I added padding-top & bottom 0 for IE6, it still adds all that space on top…

would appreciate some help; css is with markup… thank you very much…

2

Yes display:inline would make it go side by side but because the anchor was made a block level element it still goes vertical and the list element is basically left behind and occupies no space in the flow.

When it was a block element it suffers form a whitespace bug unless you set it to display:inline or float it. Even haslayout doesn’t kill the space completely and if you need to use the list for other content then give it a width and float it (and add clear:both to it also to stop it going horizontal).

3

oh my gosh… thank you very much…

I thought you could only use display:inline for <li>'s if you had them side-by-side…:wink:
that’s why this didn’t occur to me…

you relieved a big headache… thank you so much…

4

Hi,

The problem is the list element that is adding whitespace. Just set it to display:inline and you can forget about it.

You don’t need that extra div either - just use the ul itself.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
body {
    margin-top:70px;
}
#wrapper {
    margin:0 auto;
    width:760px;
}
ul#navLeft {
    list-style:none;
    margin:0;
    padding:0;
    width:156px;
    background:#dce7f6;
}
ul#navLeft li {
    display:inline;
}
ul#navLeft a {
    margin:0 auto;
    display:block;
    padding:7px 10px;
    color:#005BC4;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    font-weight:bold;
    text-decoration:none;
    border-bottom:1px solid #fff;
}
</style>
</head>
<body>
<div id="wrapper">
    <ul id="navLeft">
        <li><a href="">Lorem ipsum nam reque delicatissimi id</a></li>
        <li><a href="">Lorem ipsum nam </a></li>
        <li><a href="">Lorem ipsum nam reque delicatissimi id expetenda gubergre</a></li>
        <li><a href="">Lorem ipsum nam reque delicatissimi id</a></li>
        <li><a href="">Lorem ipsum nam reque delicatissimi id expetenda gubergre</a></li>
        <li><a href="">Lorem ipsum nam reque delicatissimi id</a></li>
    </ul>
</div>
</body>
</html>

No Hacks needed.

If you want to use the list without an anchor then float it width a width (and clear it).