Different result of h:messages after migration from JSF 1.1 to JSF 1.2

Question

I have a problem with page rendering after migration from WAS 6.0 + JSF 1.1 to WAS 7.0 + JSF 1.2. The main problem is in the following code:

<h:messages rendered="#{!webData.facesMessagesEmpty}" styleClass="messages"
showSummary="true" showDetail="false" title="Messages" layout="table" id="eMessages"
infoClass="info_with_icon" warnClass="warn_with_icon" errorClass="error_with_icon"
fatalClass="fatal_with_icon" />

This code works correctly under WAS 6.0 + JSF 1.1 but doesn’t use styles under WAS 7.0 + JSF 1.2. I have made a little investigation and found that this problem is only for layout="table". If I use layout="list" then styles are ok. Unfortunately I need table here (because layout="list" creates indent, and I don't how to aviod this). Also I have found that generated HTML code in case of layout="table" is very different for JSF 1.1 and JSF 1.2.

So my question - is it possible to force old-style (JSF 1.1) HTML generation for WAS 7.0 + JSF 1.2? I tried to google it but can’t find answer...

Answer 1

In a nutshell, JSF 1.1 will put the infoClass and consorts on a <span> inside the <td>, but JSF 1.2 will put it on the <tr>.

It look like that you're using very specific CSS properties which are not supported on the <tr> element. In that case, you've basically 2 options:

1. Change the CSS declaration to apply it on <td> instead.

   .info_with_icon_messages td {
       /* ... */
   }
   

2. Change the <h:messages> layout to be a list and add the following CSS properties on the class of the generated <ul>, in your case .messages, to remove the bullets and indent:

   .messages {
       list-style-type: none;
       margin: 0; 
       /* ... */
   }