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
nivyajnivyaj 

CSS isn't being applied uniformly across browsers

SETUP:

I have a page <apex:pageBlockSection> where I'm putting in a lot of fields. The output labels are being rendered on several lines  Here, social security # is going onto 3 lines

    <apex:pageBlockSectionItem helpText="hepMe">
        <apex:outputLabel value="Social Security Number" />
        <apex:outputField value="{!obj.Social_Security_Number__c}" />
    </apex:pageBlockSectionItem>

 



To get around this, I changed the implementation to pageblocksections


     <apex:pageBlocksection columns="1">
          <apex:pageBlockSectionItem helpText="help" dataStyle="text-align:left; width: 30%; max-width: 30%;">
               <apex:outputLabel value="Social Security Number" />
               <apex:outputField value="{!Obj.Social_Security_Number__c}" />
          </apex:pageBlockSectionItem>
    </apex:pageblockSection>

 



PROBLEM:

The CSS `dataStyle="text-align:left; width: 30%; max-width: 30%;"` is not being uniformly applied across browsers. it looks great in IE, but in FF the field columns are not lining up properly.

How do I fix this?