CSS isn't being applied uniformly across browsers

Question

SETUP:

I have a page 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?

Answer 1

If you are attempting to stop the text from wrapping within the outputLabel, you can use the CSS property white-space with a nowrap value to prevent the text from breaking into multiple lines of text.

You could apply this style to the labels using either a native element class that SalesForce renders (i.e. labelCol) or add your own styleClass attribute to the label to target your own specified elements... or directly on the label using the style attribute.

<style type="text/css">
    .noWrap { white-space: nowrap; }
</style>

<apex:outputLabel value="Social Security Number" styleClass="noWrap" />

Answer 2

Salesforce renders pageBlockSections as tables, and in the example you listed (because the columns attribute is set to 1) the pageBlockSectionItem is a row in the table. Essentially, you're changing the width of a column (using the dataStyle attribute). However, I'm assuming not all of your pageBlockSectionItems have their width set in your page.

To fix this, you will need to uniformly apply the css (dataStyle="text-align:left; width: 30%; max-width: 30%;") to all pageBlockSectionItems. Instead of applying the css to each tag, I suggest you include the following style.

<style type="text/css">
  .detailList {
      table-layout: fixed;
  }
  .labelCol {
      text-align: left !important;
      width: 30% !important;
      max-width: 30% !important;
  }
</style>

Also note that the .detailList and .labelCol CSS classes are owned by Salesforce. So, if Salesforce ever changed their CSS structure, or updated their interface, this would likely look very differently or, it may not work. If you'd like to avoid this, you can change the class names and add a styleClass=".your-class-name" attribute to each label.