p:dataList rendering in Internet Explorer 8 - jsf

Question

my page contains a data list within another data list. The outer data list simulates an accordion panel, while the inner data list renders my dynamic columns.
Everything works fine, but Internet Explorer 8 behaves differently in respect of Firefox and Chrome, because in the resulting html it renders some empty objects that leaves a blank space before data.
The screenshots show the differences between Explorer 8 and Firefox.
Firefox generated HTML:
Explorer 8 generated HTML:
Firefox rendering:
Explorer 8 rendering:
Here is the code:
<p:dataList id="data" styleClass="myDataList" value="#{bean.getAnag(idSito)}" var="tipologia" itemType="disc" type="definition">
<div class="ui-accordion ui-widget ui-helper-reset ui-hidden-container tabAccordion" style="width: 100%;">
<table id="accordionFake#{idSito}" border="1" class="table-din-col" style="display: none; margin-bottom: 10px;">
<!-- HEADERS -->
<tr class="table-din-col-titolo">
<td style="padding: 4px;">
<h:outputText value="Codice" />
</td>
<td style="padding: 4px;">
<h:outputText value="Descrizione" />
</td>
<td style="padding: 4px;">
<h:outputText value="CodiceAgg" />
</td>
<td style="padding: 4px;">
<h:outputText value="Pos" />
</td>
<p:dataList value="#{bean.buildColumns(idSito)}" var="colDin" type="definition">
<td>
<h:outputText value="#{colDin.header}" />
</td>
</p:dataList>
</tr>
<!-- HEADERS -->
<!-- ROWS BUILDING -->
<p:dataList id="dataL" var="rilevazione" selectionMode="single"
value="#{bean.getLsLoc(idSito)}" type="definition">
<tr class="table-din-col-righe">
<td class="table-din-col-colonne">
<h:outputText id="codice" value="#{rilevazione.codice}" />
</td>
<td class="table-din-col-colonne">
<h:outputText id="desc" value="#{rilevazione.descrizione}" />
</td>
<td class="table-din-col-colonne">
<h:outputText id="codSnam" value="#{rilevazione.codiceAgg}" />
</td>
<td class="table-din-col-colonne">
<h:outputText id="pos" value="#{rilevazione.pos}" />
</td>
<p:dataList value="#{bean.buildColumns(idSito)}" var="colDin" type="definition">
<td class="table-din-col-colonne">
<h:outputText value="#{colDin.property.valore}" />
</td>
</p:dataList>
</tr>
</p:dataList>
<!-- ROWS BUILDING -->
</table>
</div
</p:dataList>
How can I instruct ie8 to correctly render the data lists?
Thanks in advance.

Answer 1

It look like you was using the wrong component for the purpose, or are at least not understanding/familiar with basic HTML.
The <p:dataList> gives you the option to generate a HTML <ul><li> (unordered list), <ol><li> (ordered list) or <dl><dt><dd> (definition list).
However, you seem to be after generating a plain vanilla HTML <table><tr><td> with all cells hardcoded. You have nested a <p:dataList type="definition"> inside <tr> which would only generate <dl><dt><dd> elements inplace where <td> elements are expected. This only ends up in illegal HTML syntax. IE is rather sensitive to that.
You should replace the nested <p:dataList type="definition"> components by <ui:repeat>. It doesn't generate any HTML and your HTML will end up syntactically valid (although I wonder how it makes sense to have a <dl><dt><dd><table>, after all, I suggest to learn basic HTML as well, so that you can better understand which JSF components to pick for the purpose).