Cannot get inside a table to look the same in different IE versions

Question

I have a small piece of code that produce PrimeFaces dropdown List p:selectOneMenu, and I cannot get all the IE to look the same. First of all, here is the code

<h:form id="myForm">
    <h:panelGrid columns="3" columnClasses=",column,">
        Select Food:
        <p:selectOneMenu id="food" required="true" value="#{viewBean.selectedFood}">
            <f:selectItem itemLabel="Select One" itemValue=""/>
            <f:selectItems value="#{viewBean.foodList}"/>
            <p:ajax update=":myForm:errorFood"/>
        </p:selectOneMenu>
        <p:message id="errorFood" for="food"/>
    </h:panelGrid>
    <p:commandButton value="submit" update="myForm"/>
</h:form>

In IE8, it look like below which is horrible. The drop down list is not align with the error message. enter image description here

both IE6 and IE7 look great (with some variation but below is how I want it to look like) enter image description here

I try to solve this problem but adding padding-top: 16px; to the second column, which is the column that holding the drop down list, to make the drop down list align with the error message on IE8. Well this make IE8 look right, but make both IE6,7 not align any more. I try to use different doctype like

<!DOCTYPE html>
or
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

but none work. If I dont use doctype at all, then IE6,7,8, the drop down align with the error message, but since IE now in quirk mode, causing more problems then it solves. Any solution please? BTW firefox always look great.

BalusC · Accepted Answer

It's looking bad in IE8/9 because the <p:selectOneMenu> generates a <div> whose display property is set to inline-block by the ui-selectonemenu class. As IE6/7 doesn't support this display property and defaults to the element's default display (which is block for <div>), it looks good in IE6/7. Even though IE8/9 supports inline-block, it works only good on elements which are by default inline, but a <div> is by default block, so it goes havoc in positioning.

The concrete problem in IE8/9 when using inline-block on elements which are by default block is that the baseline is completely wrong. It's been set to the element's text contents instead of the element itself. In your particular case, the bottom line of the text "Select One" is been set to the middle of the table cell instead of the middle of the element itself. So, the vertical alignment looks bad. One of the ways to fix this is to set the vertical alignment to top instead of (default) baseline.

So, to fix this problem, I'd suggest to override the default style of <p:selectOneMenu> inside a <td> with the following in your custom stylesheet which you load by <h:outputStylesheet>:

td .ui-selectonemenu {
    vertical-align: top;
}

An alternative is to set the display property to block:

td .ui-selectonemenu {
    display: block;
}

As it's entirely contained inside a <td> anyway, it won't have any remarkable side effects in other browsers.

Davidicus · Answer

http://rafael.adm.br/css_browser_selector/

check out this guys script. It is totally awesome and has helped me 100x over. This script will actually give you css selectors for each browser or operating system and its easy to use. If that is not an option i would suggest using child selectors as ie7 and below do not support them. you can learn more about them here. http://24ways.org/2005/avoiding-css-hacks-for-internet-explorer also a very helpful resource. hope that helps.

Cannot get <p:selectOneMenu> inside a table to look the same in different IE versions

Tags:

css

doctype

internet-explorer

jsf

primefaces

Thang Pham

2 Answers

BalusC

Davidicus

Recent Activity

Donate For Us