CSS overflow and IE while using jquery for tabbed sectoions

[dwlamb_001]

Good day,

I'm using jquery to give me three tabs of information. For one of the tabs, the block of text is still very long. To make it more manageable, I've coded:

.job {
  height: 250px;
  overflow:auto;
}

Displayed in Chrome, Firefox and Opera, everything works as it should. In IE 7 (can't test in IE 8 yet) the block displays in full. Doing some research, I haven't been able to find a fix. Some suggestions indicated adding padding to the bottom of the text. Did so, no change. I tried overflow:scroll instead of auto, no change.

A copy of the mark-up appears below. It's slightly abbreviated but that is its structure. I've run the whole mark-up and the CSS through W3C validation and those report everything as error and warning free.

<div class="job"><!-- Second Tab pane -->
  <div class="right">
    <p class="yrs">
      2000-2005
    </p>
  </div><!-- end of right -->
  <div class="left">
    <p class="jobtitle">
      blah blah
    </p>
    <p>
      Sesame Street
    </p>
    <p>
      Nulla facilisi. Suspendisse
      non euismod mauris. Vivamus
      leo nisi, dictum at
      pellentesque vitae, fringilla
      quis diam. Nulla elementum
      porttitor cursus. Donec
      sagittis felis eu odio mollis
      convallis. Suspendisse
      potenti. 
    </p>
    <ul>
      <li>Nulla facilisi. Suspendisse non euismod mauris. 
      </li>
      <li>Vivamus leo nisi, dictum at pellentesque vitae, fringilla quis diam.
      </li>
      <li> Nulla elementum porttitor cursus. Donec sagittis felis eu odio mollis convallis.
      </li>
      <li>Donec sagittis felis eu odio mollis convallis. Suspendisse potenti. 
      <ul>
        <li>Nulla facilisi. Suspendisse non euismod mauris. 
        </li>
        <liVivamus leo nisi, dictum at pellentesque vitae, fringilla quis diam.
        </li>
        <li>Nulla elementum porttitor cursus. Donec sagittis felis 
        </li>
      </ul>
      </li>
    </ul>
  </div><!-- end of left -->
</div><!-- end Second Tab pane -->

Thanks in advance for looking at this and offering your comments.

[macneato]

Close the following;

<li>Vivamus leo nisi, dictum at pellentesque vitae, fringilla quis diam.</li>

Try adding "position:relative" to the class. Not too sure whats really going on since you just giving us a snippet and chances are it works when its alone. Could also try "display:block"