First element in apex:repeat not in table

Question

I have a strange issue that I can't figure out. I have a HTML table being created within an apex:outputpanel that gets put through an apex:repeat. It will list certain attributes for a particular field. On the Chrome browser everything works fine. On IE however, the first element of the table is included with the header, then the table begins. This issue is making the first element's formatting inconsistent with the rest of the table's elements. I have no idea why the first element is stuck with the header in IE and not Chrome. I'll post as much code as I can here.

 <table>
<tr>
    <th/>
    <th/>
    <th style="text-align:left; font-weight:bold"><apex:outputText value="1" rendered="{!someVar}"/></th>
    <th style="padding-right:30px; font-weight:bold"><apex:outputText value="2" rendered="{!someVar}"/></th>
    <th style="text-align:left; padding-right:10px; font-weight:bold"><apex:outputText value="3" rendered="{!someVar}"/></th>
    <th style="text-align:left; white-space:nowrap; font-weight:bold"><apex:outputText value="4" rendered="{!someVar}"/></th>
</tr>
<apex:repeat var="row" value="{!someValue}">
    <apex:outputPanel layout="none" rendered="{!someVar}">
        <apex:outputPanel layout="inline">

                <tr style="padding: 0px 0px 0px 0px; height: 24px">
                    <td style="width: 20px; text-align: center;">
                        <apex:image />
                        <apex:image />
                    </td>
                    <td style="width: 10px; text-align: center;">
                        <apex:outputText rendered="{!someVar}"><span class="footnote" style="font-size: large;">*</span></apex:outputText>
                        <apex:outputText rendered="{!someVar}"><span class="footnote">&Dagger;</span></apex:outputText>
                    </td>

                    <td style="width: 600px">                       
                        <apex:outputLink value="JavaScript:newPopup('{!URLFOR($Page.myPage)}#scrs');">
                            <apex:outputText value="{!myValue}" rendered="{!someVar}"/>
                            <apex:outputText value="{!myValue2}" rendered="{!someVar}"/>
                            <apex:outputText value="{!myValue3}"/>
                        </apex:outputLink>
                    </td>           
                    <td> <span style="padding-right: 10px; text-align:center;"> <apex:outputText rendered="{!someVar}" value="{!myValue4}"/></span></td>
                    <td>
                        <apex:outputLink value="JavaScript:newPopup('{!URLFOR($Page.myPage2)}#domains');"> 
                            <span style="padding-right: 10px;"> <apex:outputText rendered="{!someVar}" value="{!myValue5}"/></span>
                        </apex:outputLink>
                    </td>
                    <td> <span style="white-space: nowrap;"> <apex:outputText rendered="{!someVar}" value="{!myValue6}"/></span></td>                
                 </tr>

        </apex:outputPanel>
    </apex:outputPanel>
</apex:repeat>
    </table>

I'm using all generic variables and rendered conditions because the data itself isn't issue. It's the formatting. Within this repeat, the first iteration will put the element with the headers created right before this repeat. This only occurs in IE...not Chrome or Firefox. Any thoughts?

Answer 1

There were a few issues that may cause the issue.

On line 16: Added ') to the value attribute.

On line 28: Added ! to value attribute

I have updated the code here:

<apex:repeat var="row" value="{!someValue}">
    <apex:outputPanel layout="none" rendered="{!someVar}">
        <apex:outputPanel layout="inline">

                <tr style="padding: 0px 0px 0px 0px; height: 24px">
                    <td style="width: 20px; text-align: center;">
                        <apex:image />
                        <apex:image />
                    </td>
                    <td style="width: 10px; text-align: center;">
                        <apex:outputText rendered="{!someVar}"><span class="footnote" style="font-size: large;">*</span></apex:outputText>
                        <apex:outputText rendered="{!someVar}"><span class="footnote">&Dagger;</span></apex:outputText>
                    </td>

                    <td style="width: 600px">                       
                        <apex:outputLink value="JavaScript:newPopup('{!URLFOR($Page.myPage)}#scrs')">
                            <apex:outputText value="{!myValue}" rendered="{!someVar}"/>
                            <apex:outputText value="{!myValue2}" rendered="{!someVar}"/>
                            <apex:outputText value="{!myValue3}"/>
                        </apex:outputLink>
                    </td>           
                    <td> <span style="padding-right: 10px; text-align:center;"> <apex:outputText rendered="{!someVar}" value="{!myValue4}"/></span></td>
                    <td>
                        <apex:outputLink value="JavaScript:newPopup('{!URLFOR($Page.myPage2)}#domains');"> 
                            <span style="padding-right: 10px;"> <apex:outputText rendered="{!someVar}" value="{!myValue5}"/></span>
                        </apex:outputLink>
                    </td>
                    <td> <span style="white-space: nowrap;"> <apex:outputText rendered="{!someVar}" value="{!myValue6}"/></span></td>                
                 </tr>

        </apex:outputPanel>
    </apex:outputPanel>
</apex:repeat>

Answer 2

I found out a fix to this issue. I was adding the headers into spans and noticed that not all of the th's were being gathered in the header span for some reason. So I added a "phantom" span:

<span><th style="display:none"></th></span>      <-----phantom
<span><th/></span>
<span><th/></span>
<span><th style="text-align:left; font-weight:bold"><apex:outputText value="1" rendered="{!someVar}"/></th></span>
<span><th style="padding-right:30px; font-weight:bold"><apex:outputText value="2" rendered="{!someVar}"/></th></span>
<span><th style="text-align:left; padding-right:10px; font-weight:bold"><apex:outputText value="3" rendered="{!someVar}"/></th></span>
<span><th style="text-align:left; white-space:nowrap; font-weight:bold"><apex:outputText value="4" rendered="{!someVar}"/></th></span>

Now the phantom is getting moved instead of the first blank header. This worked strangely enough.