Making Tabbed contents Scrollable

I using Richfaces 3.3 and Jsf 2.

I have a tab panel with a number of tabs inside a modal popup. Id like to set the contents of each tab to a fixed height (As the modal screen must always be the same size). This means I have to make the contents of the tabs scrollable, as the content could be longer than the modal screen sometimes.

The code I have attached works for firefox and chrome...but IE does not render it correctly. The main issue with IE is that it doesnt seem to be applying the 'myTestDetailTabPanel' height on the generated element, its simply expaning the tab content as much as is needed.

<rich:tabPanel id="testTabPanel" value="#{myBean.selectedTab}"
        selectedTab="#{myBean.selectedTab}" switchType="client"
        style="width:100%; height: 465px" contentClass="myTestDeta开发者_开发知识库ilTabPanel">

        <rich:tab id="Detail" label="TEST">

            <h:panelGrid columns="2" style="table-layout:fixed; width:100%;" cellpadding="3" columnClasses="vcnDetailTextRight,textLeft">
                ....Various rows and columns...
            </h>

        </rich:tab>

</rich:tabPanel>

EDIT 1 (Adding Html & Css)

<TABLE class=rich-tabpanel-content-position border=0 cellSpacing=0 cellPadding=10 width="100%">
    <TBODY>
        <TR>
            <TD class="rich-tabpanel-content myRequestsTabPanelLayout">
                <TABLE style="WIDTH: 100%; TABLE-LAYOUT: fixed" cellPadding=3>
                    <TBODY>
                        <TR>
                            <TD><LABEL>test:</LABEL></TD>
                            <TD><SPAN>edwfrwefrewf</SPAN></TD>
                        </TR>
                    </TBODY>
                </TABLE>
            </TD>
        </TR>
    </TBODY>
</TABLE>

.myRequestsTabPanelLayout {
    height: 398px;      
    display: block;
    overflow-x: hidden;
    overflow-y: auto;       
    padding: 10px 0px 10px 0px;
    #padding: 10px 15px 10px 15px;
    margin-bottom: 15px;
}

Any ideas?

Edit 2

It's actually running on JSF 1.2, not 2.0.4.

Maybe this is the cause?

Thanks

I put a rich:panel component inside each tab and applied css rules to this to fix the issue.

<rich:tabPanel id="testTabPanel" value="#{myBean.selectedTab}"
        selectedTab="#{myBean.selectedTab}" switchType="client"
        style="width:100%; height: 465px" contentClass="myTestDetailTabPanel">

        <rich:tab id="Detail" label="TEST">

            <rich:panel styleClass="requestDetailPanel">

              <h:panelGrid columns="2" style="table-layout:fixed; width:100%;" cellpadding="3" columnClasses="vcnDetailTextRight,textLeft">
                ....Various rows and columns...
              </h>

            </rich:panel>

        </rich:tab>

</rich:tabPanel>

.myTestDetailTabPanel {
    height: 380px;
    margin: 0px;    
    padding: 0px;       
}

.requestDetailPanel {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0px;
    padding: 0px 5px 0px 0px;
    border: none;
}

Set the labelWidth property:

 <rich:tab labelWidth="200px" label="firsttab">