IE 7 and 8 overflow: hidden issue

Question

I am working on a CSS project. And run into some overflow problems with IE. This is an exam:

http://eparking.bluesys2.ch/fr/parking/search.html?l=Friborg&d=27.6.2010&t=

You can scroll through the list using the buttons in the list. In firefox, safari and other regular browsers everything works fine. But in IE, I can't get this overflow: hidden;to work, and it starts to drive me crazy. The list shows that it is always displayed in full, now what I'm trying is important. Can someone give me a hint?

this is the css of the list container:

div#listing {
width: 204px; height: 364px; overflow: hidden;
}

and these are the objects inside:

div#listing ul li {
    position: relative;
    padding: 5px;
    margin: 0 0 7px;

    height: 54px;

    background-image: -moz-linear-gradient(top, #f5f5f5, #ddd);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f5f5f5),color-stop(1, #ddd));
    border: 1px solid #ddd;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -moz-box-shadow: 0 0 8px #ddd;
    -webkit-box-shadow: 0 0 8px #ddd;
    box-shadow: 0 0 8px #ddd;
}

An event if I install a UL that contains an LI, with my list up to a height of 100 pixels with hidden overflow. They appear.

Answer 1

IE. :

div#listing {
position: relative;
width: 204px; height: 364px; overflow: hidden;
}

: , : http://snook.ca/archives/html_and_css/position_relative_overflow_ie/