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.

This is why IE has [conditional comments](http://www.quirksmode.org/css/condcom.html) that allow targeting IE versions with specific CSS — Pekka, Jan 12 '12 at 21:08
A doctype is required of all new web pages. Transitional is not for new web pages. The other two will put you into standards mode where you want to be but this one: ` ` does the job in a shorter space, is new and preferred. — Rob, Jan 12 '12 at 21:51

BalusC · Accepted Answer · 2012-01-13T00:15:36.737

2

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.

edited Jan 13 '12 at 00:15

answered Jan 12 '12 at 23:45

BalusC

1,082,665
372
3,610
3,555

Thanks goodness, you answered my question ... phewww ... :D I cant test it now, since I am not at work, but will test it immediately tomorrow. Thank you, great explanation btw, I learnt a lots. – Thang Pham Jan 13 '12 at 01:55
What do you use to debugger IE, BalusC? I used Developer Tool on IE8, by pressing F12, but that hardly ever help me. – Thang Pham Jan 13 '12 at 17:23
1

Such a web developer tool won't help a beginner in finding and understanding the real cause of a browser-specific CSS-related misbehaviour. The years of experience and knowing/understanding the (common) IE bugs is what counts. I used the web developer tool (in Chrome, actually) only to learn what HTML/CSS is all generated/used by ``, then it was just like 1+1=2 for me :) – BalusC Jan 13 '12 at 17:33
@balusC behavior in IE11 did not change - and I start to think that this is expected behavior: the baseline for a DIV is the outside box, not the baseline for contained text inside (what would it pick for multiple elements anyhow). If you use labels, input fields, etc all not contained in a DIV they would all line up nicely using the baseline. I am not quite understanding the `` fix either. – YoYo Dec 21 '16 at 22:03

score 1 · Answer 2 · answered Jan 12 '12 at 21:10

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.

score 0 · Answer 3 · answered Jun 12 '14 at 22:10

Just be careful using h:panelGrid (generates tr and td) if you're working on a project that uses 508 compliant software. It likes tr and td for real tables ONLY. Otherwise, it likes h:panelGroup which generates divs.

I see h:panelGroup in a lot of the PrimeFaces examples. 508 compliance is a big deal especially in all programs contracted to the government.

score 0 · Answer 4 · answered Dec 23 '16 at 23:39

This is a simplified form of the code generated by a <p:selectOneMenu>:

<div class="toolbar">
<label>Label:</label>
<div class="menu">
<label class="field">Selected Item</label>
</div>
</div>

With following CSS, slightly modified for visibility of the boxes:

div {
    border:1px solid red;
    padding:4px;
}
div.menu {
    display:inline-block;
}
label.field {
  display: block;
  border: 1px dashed blue;
  padding: 4px;
  box-shadow: inset 0 2px 2px #8f8f8f;
  overflow: hidden;
}

It goes well in Safari, but in Firefox and IE11 (Enterprise Mode OFF), it messes up the baseline of the label for the "Selected Item".

To get the baseline properly working, there are 2 options here:

Change the overflow property to visible on label.field,
or change display to inline.

Choosing the second option has a side effect:

with inline, the top and bottom padding of the containing div element suddenly seems ignored. Taking that into account, the first option is probably the better one.

Also when doing this for a primefaces override, you probably want to set this as follows:

  label.ui-selectonemenu-label {
    overflow: visible !important;
  }

The !important modifier on the attribute makes sure that the PrimeFaces stylesheet won't override it again. This is required because the PrimeFaces gets applied after applying all <h:head> stylesheets.

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

4 Answers4