Overflow:hidden in IE doesn't hide image beneath border

I'm attempting to slide in images into my main container using some basic JavaScript on page load.

I've set overflow:hidden on my container div so that the image cannot be seen until it actually hits the container.

The problem is that in IE doesn't seem to include the border in overflow:hidden, so the image looks horrible as it slides in over the border. Anyway around this? I have no problems in other browsers.

My original code:

#container{
 border: 5px solid #3A3535;
 width: 960px;
 margin: 0 auto;
 -moz-border-radius: 12px;
 -webkit-border-radius: 12px;
 border-radius: 12px;
 padding: 10px 20px 0;
 background: #fff;
 overflow: hidden;
 position: relative;
}

UPDATE: I did manage to get it to work. I wrapped the container in a div, removed the border from container, and added the border to wrapper. Fixes it although I don't know why exactly.

#wrapper{
    width: 1000px;
    position: relative;
    margin: 40px auto;
    border: 5px solid #3A3535;
    -moz-border-radius: 16px;
   -webkit-border-radius: 16px;

   border-radius: 16px;
}
#container{
 width: 960px;
 margin: 0 auto;
 -moz-border-radius: 12px;
 -webkit-border-radiu开发者_JAVA百科s: 12px;
 border-radius: 12px;
 padding: 10px 20px 0;
 background: #fff;
 overflow: hidden;
 position: relative;
}

div.something {
    width: 200px;
    overflow: hidden;
}

Try setting the width or height to make overflow work.

try add height for Div like this;

height:100%