IE7/IE8 in Compatibility mode DIV with overflow problem - css

Question

I have a scrollable div on a page that ends up rendering past the bottom of div and sometimes leaves stick characters behind that don't scroll. This happens in IE7 and IE8 in compatibility mode.
Here is the HTML code from the DOM:
<DIV id=ctl00_MainContent_ViewPort class=AgreementViewPort><IMG class=PortSeal src="/images/Seal.png">
<DIV class=DocumentTitle>Document Title</DIV>
<OL>
<LI>Condition #1</LI>
<LI>Condition #2<SUP>1</SUP></LI>
<LI>Condition #3</LI>
<DL>
<DT><SUP>1</SUP> some foot-noted definition.</DT></DL></DIV>
Here's the applied CSS style:
color: #000;
font-family: arial, tahoma, sans-serif
font-size: 12pt;
height: 300px;
margin: 5px;
overflow: scroll;
padding : 5px;
width: 600px;
This renders fine under IE8, Firefox, and Chrome.
Any suggestions?

Answer 1

Just by looking I'd suggest putting the image in its own DIV. This way you can control any overflows.
Also add the following to your CSS:
clip:rect(0px,600px,300px,0px);

Answer 2

We've solved the mystery.
If you want to poke at the issue directly, here's where it can be seen live. Note: After we push the fix, this link won't repro.
On the LI element in the page level CSS, I removed the following style attributes
li
{
margin-bottom: 10px;
position: relative;
left: 10px;
width: 500px;
}
And replaced them with:
li
{
margin: 0px 0px 10px 25px;
}
On the OL element in the page level CSS, the width attribute was moved.
ol
{
padding-left: 10px;
width: 500px;
}
And I feel like something of an idiot. The moral of the story, and this has been discussed elsewhere is that IE7 scrollable divs and the CSS position attribute do not play well together.