function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
calvin_nrcalvin_nr 

Apex:DataTable renders badly in Firefox but not Chrome and IE, any idea why?

Guys, 

 

This is a VS page where I display SF data using an Apex:Datatable. I have customized the table using CSS. The table is rendered badly in Firefox v13 where the cells have been spread wide out and the table contents are overflowing. While it is fine in IR and Chrome.

 

Another problem is the top border appears in IE and does not appear in Chrome and Firefox. 

The top border issue I can live with but do you have any idea why Firefox would display the page like this? any known issues. 

 

Screenshots(sensitive data has been blackened) and code snippets below:

 

IE

IE

Firefox: The cells have been stretched out :(

Firefox

 

Datatable code:

<apex:outputPanel styleClass="tableContainerClass" id="tableContainer">  
       
    <apex:dataTable value="{!moneyTransactions}" var="mt" id="dataTable" rowClasses="oddRow,evenRow" styleClass="tableClass" cellpadding="5" cellspacing="45" headerClass="dataHeaderRow" captionClass="pagetitle" columnsWidth="15%,10%,20%,5%,20%,15%,15%" rules="none">   
     <apex:facet name="caption">FUNDING REPORT </apex:facet>
            <apex:column >
                <apex:facet name="header">
                    <apex:commandLink value="Transaction Type" action="{!toggleSort}" rerender="results,debug,fundingReportResults,dataTable,errors,pageNumberPanel" styleClass="commandStyle">
                        <apex:param name="sortField" value="ACH_Type__c" assignTo="{!sortField}"/>
                    </apex:commandLink>
                </apex:facet>
                
               <apex:outputText value="Direct Deposit" rendered="{!IF(mt.moneyTransactions.ACH_Type__c ='VHR DDP Collection',true,false)}"/> 
               <apex:outputText value="Checks" rendered="{!IF(mt.moneyTransactions.ACH_Type__c ='VHR Check Collection',true,false)}"/> 
               <apex:outputText value="Direct Deposit" rendered="{!IF(mt.moneyTransactions.ACH_Type__c ='VHR DDP Disbursement and Collection',true,false)}"/> 
               <apex:outputText value="Taxes" rendered="{!IF(mt.moneyTransactions.ACH_Type__c ='VHR Tax Collection',true,false)}"/>
               <apex:outputText value="Garnishment" rendered="{!IF(mt.moneyTransactions.ACH_Type__c ='VHR Garnishment Collection',true,false)}"/>
               <apex:outputText value=" "/> 
               <apex:outputPanel styleClass="iconPanel">
               <apex:image rendered="{!IF(mt.moneyTransactions.ACH_Type__c ='VHR DDP Collection',true,false)}" value="{!$Resource.DepositImg}" width="30" height="20" styleClass="iconClass"/>
               <apex:image rendered="{!IF(mt.moneyTransactions.ACH_Type__c ='VHR Check Collection',true,false)}" value="{!$Resource.CheckImage}" width="30" height="20" styleClass="iconClass"/>
               <apex:image rendered="{!IF(mt.moneyTransactions.ACH_Type__c ='VHR Tax Collection',true,false)}" value="{!$Resource.TaxImage}" width="30" height="20" styleClass="iconClass"/>
               <apex:image rendered="{!IF(mt.moneyTransactions.ACH_Type__c ='VHR Garnishment Collection',true,false)}" value="{!$Resource.GarnishmentImage}" width="30" height="20" styleClass="iconClass"/>
               <apex:image rendered="{!IF(mt.moneyTransactions.ACH_Type__c ='VHR DDP Disbursement and Collection',true,false)}" value="{!$Resource.DepositImg}" width="30" height="20" styleClass="iconClass"/>
               </apex:outputPanel>
       
        
           
            </apex:column>
 
            <apex:column >
                <apex:facet name="header">
                    <apex:commandLink value="Settlement Date" action="{!toggleSort}" rerender="results,debug,fundingReportResults,dataTable,errors,pageNumberPanel" styleClass="commandStyle">
                        <apex:param name="sortField" value="Settlement_Date_First__c" assignTo="{!sortField}"/>
                    </apex:commandLink>
                </apex:facet>   
                <apex:outputField value="{!mt.moneyTransactions.Settlement_Date_First__c}"/>              
            </apex:column>
 
           
          <apex:column >
                <apex:facet name="header">
                    <apex:commandLink value="Details" action="{!toggleSort}" rerender="results,debug,fundingReportResults,dataTable,errors,pageNumberPanel" styleClass="commandStyle">
                        <apex:param name="sortField" value="Settlement__r.id" assignTo="{!sortField}"/>
                    </apex:commandLink>
                </apex:facet> 
                <apex:outputLink onclick="window.open('/apex/SettlementDetails?id={!mt.moneyTransactions.Settlement__c}');" rendered="{!IF((mt.moneyTransactions.ACH_Type__c ='VHR DDP Disbursement and Collection' || mt.moneyTransactions.ACH_Type__c ='VHR Check Collection' || mt.moneyTransactions.ACH_Type__c ='VHR DDP Collection')&& mt.moneyTransactions.Settlement__c != null,true,false)}">    
                  {!mt.moneyTransactions.Settlement__r.name}
                </apex:outputLink>
               <apex:outputLink onclick="window.open('/apex/TaxDetails?id={!mt.moneyTransactions.Tax_Batch__c}');" rendered="{!IF((mt.moneyTransactions.ACH_Type__c ='VHR Tax Collection') && mt.moneyTransactions.Tax_Batch__c != null,true,false)}">    
                    Tax Batch  
               </apex:outputLink>  
               <apex:outputLink onclick="window.open('/apex/GarnishmentDetails?id={!mt.moneyTransactions.Payroll_Group_Detail__c}');" rendered="{!IF((mt.moneyTransactions.ACH_Type__c ='VHR Garnishment Collection'),true,false)}">    
                    Payroll Group Detail
               </apex:outputLink>  
                            
            </apex:column>   
    
                <apex:column >
                <apex:facet name="header">
                    <apex:commandLink value="Movement Type" action="{!toggleSort}" rerender="results,debug,fundingReportResults,dataTable,errors,pageNumberPanel" styleClass="commandStyle">
                        <apex:param name="sortField" value="Money_Movement_Type__c" assignTo="{!sortField}"/>
                    </apex:commandLink>
                </apex:facet> 
                <apex:outputField value="{!mt.moneyTransactions.Money_Movement_Type__c}"/>           
            </apex:column>
            
             <apex:column >
                <apex:facet name="header">
                    <apex:commandLink value="Bank Name" action="{!toggleSort}" rerender="results,debug,fundingReportResults,dataTable,errors,pageNumberPanel" styleClass="commandStyle">
                        <apex:param name="sortField" value="Bank_Name__c" assignTo="{!sortField}"/>
                    </apex:commandLink>
                </apex:facet> 
                <apex:outputField value="{!mt.moneyTransactions.Bank_Name__c}"/>           
            </apex:column>
            
            <apex:column >
                <apex:facet name="header">
                    <apex:commandLink value="Account Number" action="{!toggleSort}" rerender="results,debug,fundingReportResults,dataTable,errors,pageNumberPanel" styleClass="commandStyle">
                        <apex:param name="sortField" value="Bank_Account_Number__c" assignTo="{!sortField}"/>
                    </apex:commandLink>
                </apex:facet> 
                <apex:outputText value="{!mt.moneyTransactions.Bank_Account_Number__c}"/>           
            </apex:column>
            
             <apex:column >
                <apex:facet name="header">
                    <apex:commandLink value="Total Amount" action="{!toggleSort}" rerender="results,debug,fundingReportResults,dataTable,errors,pageNumberPanel" styleClass="commandStyle">
                        <apex:param name="sortField" value="Total_ACH_Amount__c" assignTo="{!sortField}"/>
                    </apex:commandLink>
                </apex:facet>  
                <apex:outputField value="{!mt.moneyTransactions.Total_ACH_Amount__c}"/>                     
            </apex:column>
 

            
            
        </apex:datatable>  
        </apex:outputPanel> 

 CSS relevant to this:

 

.tableClass {width:80%;border-collapse:collapse;border-spacing:1pt;position:relative;}
.tableContainerClass{width:80%;position:relative;}
.oddRow{border-bottom:1px solid #fec00d;border-top:1px solid transparent;padding:8px;background:#F2F2F2;color:#339;}
.evenRow{background:#fff;border-bottom:1px solid #fec00d;color:#669;border-top:1px solid transparent;padding:8px;}
.commandStyle{color: #0079C1}
a:hover{color:black;}
[id*=criteria] {color: font-size: 11px;}
.dataHeaderRow{font-size:13px;font-weight:normal;background:#fff;border-bottom:4px solid #fec00d;border-top:1px solid #fec00d;color:#800080;padding:8px;border-collapse:collapse;border-spacing:0pt;}
.iconClass{
   horizontal-align: middle;
   padding: 1px;
  
} 
.iconPanel{
float: right;
}
.pagetitle{
font-weight:bold;
color: #0079C1;
background-color:white;
text-align:left;
text-indent:8px;
}
.IconExcel{
float: right; 
}

 Thanks a lot in advance!

 

Calvin


calvin_nrcalvin_nr
I would really appreciate it if anyone could point me in the right direction here.