Scrolling Div Problem

[robindean]

I have a div tag that is styled as follows:

.select_menu {
width: 298px;
max-height: 50%;
border-left: 1px solid #aaaaaa;
border-right: 1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
background-color: #333333;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
display: none;
};

This div is made visible via a javascript mousedown event:

onmousedown="document.getElementById('some_id').style.display = 'block';"

My problem is that, after the div display style is changed, Explorer won't show the scroll bars unless I start moving the mouse wheel.

I need for the scrollbars to appear immediately with the div.

Does anyone know of a fix / workaround for this?

[Fang]

IE6 does not understand max-heightbody {height:100%;} /* may need to be parent of select_menu rather than body */
.select_menu {
width: 298px;
height:50%; max-height: 50%;
border-left: 1px solid #aaaaaa;
border-right: 1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
background-color: #333333;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
display: none;
}
Better to use conditional comments (http://msdn2.microsoft.com/en-us/library/ms537512.aspx) to target IE6

[robindean]

some of the menus don't require that much space. For those menus, setting the height to 50% looks strange.

I'm happy to know about the IE6 max-height issue though.

I'm seeing this problem in IE7, though. It does seem to read max-height but the scroll bars don't appear automatically.

I'm wondering if perhaps there is a way to get the div to scroll a little bit on it's own without actually scrolling at all, thus triggering the appearance of scroll bars.

Any ideas?

[Fang]

IE7 understands max-height, use conditional comments for IE6.

Fix max-height in IE6 (http://www.gunlaug.no/contents/wd_additions_14.html)

[robindean]

max-height is a CSS 3 thing right?

[Fang]

CSS 2.1 (http://www.w3.org/TR/CSS21/visudet.html#min-max-heights)
Another possible fix: http://www.quirksmode.org/css/width.html (top right)