function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Dinesh Suggala 8Dinesh Suggala 8 

Facing cross browser compatibility issue in visual force page


InternetExplorerChrome
I have used html tags & some css in visual force page. As it is looking in Chrome, its not looking in IE 11 & Firefox. Attaching the screenshots
I am pasting the Code below:
<apex:form > <apex:pageBlock title="Quote Line Items"> <h5> <p> Quote: <b> {!QuoteLineItem[0].quote.name} </b> </p> </h5> <p/> <head> <style> table th { width: 100px; white-space: normal; text-align: center; } .wrapper { text-align: center; } </style> </head> <table border="2" width="100%"> <td> <apex:outputPanel layout="block" style="overflow: auto;width:770px ;height: 590px;"> <table cellspacing="2" cellpadding="2" border="1" style="border-collapse:collapse;border-color:#000000;" width="100%" id="table"> <thead> <tr> <th bgcolor="#cccccc" style="height:60px;">Item</th> <th bgcolor="#cccccc" style="height:60px;">Part/Number or other</th> <th bgcolor="#cccccc" style="height:60px;">Thickness</th> <th bgcolor="#cccccc" style="height:60px;">Width(")</th> <th bgcolor="#cccccc" style="height:60px;">Length(")</th> <th bgcolor="#cccccc" style="height:60px;">P And O or Black</th> <th bgcolor="#cccccc" style="height:60px;">Sheet/Plate Grade</th> <th bgcolor="#cccccc" style="height:60px;">Type of Material Needed</th> <th bgcolor="#cccccc" style="height:60px;">Short Tons of Sheet/Plate</th> </tr> </thead> <tbody> <apex:variable var="call" value="{!0}" /> <apex:repeat value="{!Quotelineitem}" var="quoteline"> <tr onmousemove="this.style.backgroundColor='#32F0FA'" onmouseout="this.style.backgroundColor =''"> <td> <apex:variable var="call" value="{!call+1}" /> <apex:outputText value="{!call}" /> </td> <td bgcolor="#C3FDB8" > <apex:inputField value="{!quoteline.Part_Number_Other__c}" /> </td> <td bgcolor="#C3FDB8"> <apex:inputField value="{!quoteline.Thickness__c}" style="width:60px;"/> </td> <td bgcolor="#C3FDB8"> <apex:inputField value="{!quoteline.Width__c}" style="width:50px;"/> </td> <td bgcolor="#C3FDB8"> <apex:inputField value="{!quoteline.Length__c}" style="width:50px;"/> </td> <td bgcolor="#C3FDB8"> <apex:inputField value="{!quoteline.P_O_or_Black__c}" /> </td> <td bgcolor="#C3FDB8"> <apex:inputField value="{!quoteline.Sheet_Plate_Grade__c}" style="width:60px;"/> </td> <td bgcolor="#C3FDB8"> <apex:inputField value="{!quoteline.Type_of_Material_Needed__c}" /> </td> <td bgcolor="#C3FDB8"> <apex:inputField value="{!quoteline.Short_Tons_of_Sheet_Plate__c}" style="width:60px;"/> </td> </tr> </apex:repeat> </tbody> </table> </apex:outputPanel> </td> <td> <apex:outputPanel layout="block" style="overflow: auto; width:790px ;height: 590px;"> <table cellspacing="2" cellpadding="2" border="1" style="border-collapse:collapse;border-color:#000000;" width="100%" id="table1"> <thead> <tr> <th bgcolor="#cccccc" style="height:60px;">Fob Mill Base</th> <th bgcolor="#cccccc" style="height:60px;">Gauge Extras</th> <th bgcolor="#cccccc" style="height:60px;">Width Extras</th> <th bgcolor="#cccccc" style="height:60px;">Grade Extras</th> <th bgcolor="#cccccc" style="height:60px;">P and O Charge</th> <th bgcolor="#cccccc" style="height:60px;">Total Inbound Freight</th> <th bgcolor="#cccccc" style="height:60px;">Cost FOB Cargill Plant</th> <th bgcolor="#cccccc" style="height:60px;">Edge Trim</th> <th bgcolor="#cccccc" style="height:60px;">Packaging</th> <th bgcolor="#cccccc" style="height:60px;">Theo. Min. Billing</th> <th bgcolor="#cccccc" style="height:60px;">Total Material Cost</th> <th bgcolor="#cccccc" style="height:60px;">Margin</th> <th bgcolor="#cccccc" style="height:60px;">Payment Terms</th> <th bgcolor="#cccccc" style="height:60px;">Discount</th> <th bgcolor="#cccccc" style="height:60px;">Sales Price FOB Cargill</th> <th bgcolor="#cccccc" style="height:60px;">Freight to Customer</th> <th bgcolor="#cccccc" style="height:60px;">Delivered Price to Customer</th> </tr> </thead> <tbody> <apex:repeat value="{!Quotelineitem}" var="quoteline"> <tr onmousemove="this.style.backgroundColor='#32F0FA'" onmouseout="this.style.backgroundColor =''"> <td bgcolor="#FFF380"> <apex:inputField value="{!quoteline.Fob_Mill_Base__c}" style="width:50px;"/> </td> <td bgcolor="#FFF380"> <apex:inputField value="{!quoteline.Gauge_Extras__c}" style="width:50px;"/> </td> <td bgcolor="#FFF380"> <apex:inputField value="{!quoteline.Width_Extras__c}" style="width:50px;"/> </td> <td bgcolor="#FFF380"> <apex:inputField value="{!quoteline.Grade_Extras__c}" style="width:50px;"/> </td> <td bgcolor="#FFF380"> <apex:inputField value="{!quoteline.P_O_Extra_Charge__c}" style="width:50px;"/> </td> <td bgcolor="#FFF380"> <apex:inputField value="{!quoteline.Total_Inbound_Freight__c}" style="width:50px;"/> </td> <td bgcolor="#FFF380"> <apex:inputField value="{!quoteline.Cost_FOB_Cargill_Plant__c}" /> </td> <td bgcolor="#FFF380"> <apex:inputField value="{!quoteline.Edge_Trim__c}" style="width:50px;"/> </td> <td bgcolor="#FFF380"> <apex:inputField value="{!quoteline.Packaging__c}" style="width:60px;"/> </td> <td bgcolor="#FFF380"> <apex:inputField value="{!quoteline.Theo_Min_Billing__c}" style="width:50px;"/> </td> <td bgcolor="#FFF380"> <apex:inputField value="{!quoteline.Total_Material_Cost__c}" /> </td> <td bgcolor="#FFF380"> <apex:inputField value="{!quoteline.Margin__c}" style="width:50px;"/> </td> <td bgcolor="#FFF380"> <apex:inputField value="{!quoteline.Payment_Terms__c}" style="width:50px;"/> </td> <td bgcolor="#FFF380"> <apex:inputField value="{!quoteline.Discount__c}" style="width:50px;"/> </td> <td bgcolor="#FFF380"> <apex:inputField value="{!quoteline.Sales_Price_FOB_Cargill__c}" /> </td> <td bgcolor="#FFF380"> <apex:inputField value="{!quoteline.Freight_to_Customer__c}" style="width:50px;"/> </td> <td bgcolor="#FFF380"> <apex:inputField value="{!quoteline.Delievered_Price_to_Customer__c}" /> </td> </tr> </apex:repeat> </tbody> </table> </apex:outputPanel> </td> </table> <apex:pageBlockButtons > <div style="padding-left: 23%"> <apex:commandButton value="Save" action="{!Save}" /> <apex:commandButton value="Cancel" action="{!Cancel}" /> </div> </apex:pageBlockButtons> </apex:pageBlock> </apex:form>

Need urgent help to fix the cross browser issue. You can see in IE middle scrolling is coming while chrome it is coming perfect. Chrome is looking perfect for us.
I have tried using overflow:hidden in first table.That time For first 4 rows its coming aligned while for rest of rows both tables are not aligned .
Sunil MadanaSunil Madana
Hi Dinesh, try adding "::-webkit-scrollbar { display: none; }" in between your style tag and let us know the result. You may also try the below and see if it works. 
<style type="text/css">
.content::-webkit-scrollbar { 
  /* This is the magic bit */
  display: none;
}
</style>
<apex:outputPanel styleClass="content" layout="block" style="overflow: auto;width:770px ;height: 590px;">

If the above suggestion worked, let us know by marking the answer as "Best Answer" right under the comment which will help the rest of the community should they have a similar issue in the future. Thanks, Sunil