+ Start a Discussion

CSS isn't being applied uniformly across browsers


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}" />


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}" />



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?