Question

Setup :

I have a containing div which is meant to be scrollable. This is a container for my jquery ui tab div.

Problem:

When I scroll the container in IE8 it scrolls other content in it but the jquery UI tab is fixed as though position=fixed. Works fine in FF. Any help welcome. Many thanks

CSS:

#content {
    overflow:auto;
    margin: 1px;
    height: 700px;
}

div.content-container {
    border: solid 1px #C8C8C8;
    padding:10px;
    background-color: #F5F3E5;
    margin: 1px 2px 10px 1px;
}

js:

$('#tabs').tabs();

html:

<div id="content">
    <div class="content-container">
        <div id="tabs">
         </div>
    </div>
</div>

Answer 1

Add position:relative to the scrolling container. This is a common issue in IE.