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
BehzadBehzad 

Layout in IE vs. Layout in Firefox

Hey guys,

 

I've created a Visualforce page for a number of users.

Some of my Org users use IE and some use Firefox.

 

For some reason, my Visualforce page is displayed differently in each web browser.

 

This is a sample of my Visualforce code:

<apex:pageBlock title="IMAC Detail" id="detailPageBlock">
    <apex:panelGrid columns="4" rules="rows" 
     styleClass="panelGridClass"     
     title="IMAC detail" width="100%" columnClasses="panelGridLabel,
     panelGridValue">            
         <apex:outputText value="IMAC" />
         <apex:panelGroup >
         <apex:outputField value="{!IMAC__c.Name}" rendered="
         {!IMAC__c.ID != inlineEditId}"/>
         <apex:inputField value="{!IMAC__c.Name}"  rendered="
         {!IMAC__c.Id == inlineEditId}"/>
         </apex:panelGroup>
         <apex:outputText value="Owner" />
         ....
    </apex:panelGrid>
</apex:pageBlock> 
 Also, the following figure highlights the differences between displayed pages in IE and in FireFox:
 IE vs. Firefox
 
Does anyone know what I need to do so my Visualforce page would render consistenlty accross these web browsers?
 
Thank you,
 
Behzad 
 


Best Answer chosen by Admin (Salesforce Developers) 
stephanstephan
I'm guessing you're testing on IE6? I don't have a version of that I can test against, unfortunately. But try adding the following to your .panelGridClass:
 
border-collapse: collapse;
 
 
 


All Answers
stephanstephan
What do you have defined in your CSS for panelGridClass, panelGridLable, and panelGridValue?


BehzadBehzad
<!--  Set the style for the Labels columns-->
        .panelGridLabel {
            font-weight: bold;
            text-align: right;
            width: 17.5%;
            padding-right: 10px;
        }

<!-- Set the style for the Values columns -->
        .panelGridValue {
            text-align: left;
            padding-left: 10px;
            width: 32.5%;
        }

<!-- Set the overall masterClass for panelGrid -->
        .panelGridClass {        
            border-bottom-color:#e3deb8;
        }
 
The above is the code for my CSS Style.
 
Thanks,
 
Behzad 


stephanstephan
I'm guessing you're testing on IE6? I don't have a version of that I can test against, unfortunately. But try adding the following to your .panelGridClass:
 
border-collapse: collapse;
 
 
 
This was selected as the best answer
BehzadBehzad
It worked.
 
Thank you for your input Stephan,
 
Behzad