p:selectOneMenu error when wrap around by "display: inline-block" on IE 8

Question

so when I wrap the p:selectOneMenu around "display: inline-block", and try to click on the drop-down box list, the list will NOT drop down. This only happen in INTERNET EXPLORER 8 (work in IE6, 7, firefox). Here is the small code to recreate the issue.

<h:head>
    <title>Facelet Title</title>
    <link rel="stylesheet" href="resources/css/layout.css" type="text/css"/>
</h:head>
<h:body>
    <div id="MainWrapper">
        <h:form id="myForm">
            <p:selectOneMenu value="#{viewBean.selectedFood}">
                <f:selectItem itemLabel="Select One" itemValue=""/>
                <f:selectItems value="#{viewBean.foodList}"/>
                <p:ajax update=":myForm:text"/>
            </p:selectOneMenu>
            <br/>
            <h:outputText id="text" value="#{viewBean.selectedFood}"/>
        </h:form>
    </div>
</h:body>

My layout.css

body{
    text-align: center;
    background-color: #EBEAE3;
    margin: 0;
    font-family: Trebuchet;
}

#MainWrapper{
    display: inline-block;
    width: 1100px;
    background-color: white;
    min-height: 1000px;
    _height: 1000px;     
}

The purpose of "MainWrapper" is to center the component. If I take the "display: inline-block" out, or use h:selectOneMenu, then everything work fine.

Answer 1

To start, this is the wrong way to center block elements.

body{
    text-align: center;
}

#MainWrapper{
    display: inline-block;
    width: 1100px;
}

You need margin: 0 auto; instead.

#MainWrapper{
    margin: 0 auto;
    width: 1100px;
}

(yes, remove the text-align: center; from the body)

As to why the problem occurs in IE8 but not in IE6/7, well, the inline-block is not supported in IE6/7 anyway and perhaps it's just an IE8 specific conflict with the CSS of the <p:selectOneMenu>. Think of haslayout bugs.

See also:

• Center a div in CSS