IE 8 Overflow not rendering

Question

I'm trying to add overflow to an HTML element, and of course it works in every browser but IE.

Here is my code:

<div class = "twitter">
  <div class="twitter_image">
    <div class="user"></div>
  </div>
  <div class="label">
    <div class="boarder_control">
      <div class= "tweet_container">
      </div>
    </div>
    <div class ="smfooter"></div> 
  </div>
</div>

css:

  .twitter {
    padding-bottom: 2px;
    background-color: green;
  }

  .smfooter {
    padding: 2px;
    height: 10px;
  }

  .label {
    height: 15px;
  }

  .tweet_container {
    overflow-y:auto;
  }

  .boarder_control{
    padding:5px;
  }

  .tweet {
    margin-top: 7px;
    margin-bottom: 7px;
  }

What are the best practices for using overflow with IE 8?

IE:

All other browsers on earth:

Thanks

Answer 1

http://www.w3schools.com/cssref/css3_pr_overflow-y.asp

Note: The overflow-y property does not work properly in IE8 and earlier.

You can resolve this by using overflow: scroll;

If there is a horizontal scroll bar then you may have to hide it with another div.

Try this thread...

Hide html horizontal but not vertical scrollbar

Answer 2

try to also assign an height to .tweet_container e.g.

.tweet_container { height: 300px; overflow-y: auto; }