Div with Background color won't wrap nested ul's

[cober]

I have a left side nav within a div that is:

<div>
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</div>
I can't seem to get the div to match the actual height of the list which give me a background colour problem and the following div's overlap the list.

The current result is visible here: http://www.pwct.cober.ca/content.html

Any insight into this seemingly simply layout would be appreciated.

Thanks.

[abduraooft]

Please specify the exact location of these tags?

[cober]

Thanks for the quick reply.
Is this what you are requesting?

<div id="wrap">
<div id="left-column">
<div class="bluff">
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

[_Aerospace_Eng_]

Get rid of the height here
.bluff li {
margin:0;
height:25px;
}

[abduraooft]

You have some errors in closing some of you tags.
Fix validation-errors (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pwct.cober.ca%2Fcontent.html&charset=%28detect+automatically%29&doctype=Inline&group=0),
and then try.
Edit: Aero beat me, but you should fix the errors.

[cober]

Thanks to you both, I appreciate the helpful & quick response.

That has definitely resolved the layout issue in all browsers. The reason I had used the height tag was to reign in IE6. The problem still exists, the line height in IE6 is about double that of Firefox & IE7.

Any further help would be great.

[_Aerospace_Eng_]

Add this to your stylesheet
/*hide from IE Mac\*/
* html .bluff li, * html .bluff li a {
height:1%;
}
/*end hide*/
That will target IE 6 and below for PC.

[harbingerOTV]

<!--[if lt IE 7]>
<style type="text/css" media="screen">
.bluff li, .bluff li a {
height:1%;
}
</style>
<![endif]-->


but conditional comments would be better IMO.