IE 7 & 8 overflow:hidden problem
I am working on the CSS of a project. And encounter some Overflow problems with IE. This is the testsite:
http://eparking.bluesys2.ch/fr/parking/search.html?l=Fribourg&d=27.6.2010&t=
You can scroll the list using the buttons under the list.
In firefox, safari and all the other normal browsers anything works fine. But in IE i can't make this overflow: hidden;
to work and it starts to drive me crazy. The list shows always shows up in its full length, now matter what i try. Can anyone give me a clue?
this is the css of the开发者_运维技巧 list container:
div#listing {
width: 204px; height: 364px; overflow: hidden;
}
and this 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;
}
Event if i set the UL that contains the LI's with my list to 100px height with a hidden overflow. They show up.
Well known IE bug. Do this:
div#listing {
position: relative;
width: 204px; height: 364px; overflow: hidden;
}
Edit: Link explaining it here: http://snook.ca/archives/html_and_css/position_relative_overflow_ie/
精彩评论