+ 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