I have been working on the force.com platform for nearly three years now, and the only problem which drives me nuts is when i have to deal with UI (User Interface) issues.

I have to admit that it really looks beautiful when you can have your own custom CSS for your visualforce pages with wonderful styles. But, when it comes to fixing UI issues i actually spend a lot of time to find the bug. Hence, in this article i have put together the methodologies i use to overcome them. This saves lot of your time (GUARANTEED).

The " !important " keyword:

!important - meaning - DONT take what is in the CSS. take what i tell here.

Let's jump straight. Let's say that you have a "div" with the name "styleme" and the defenition is as follows

.styleme
{
  margin:o;
}

This implies that there should be no space between the margin of your browser (actually the parent div) and the contents in this div.
And, let's say that you have a visualforce page like this

<apex:page>
<style>
.styleme
{
  margin:o;
}
</style>
     <div class="styleme">
             Hi!!! I am styled!!!
     </div>
</apex:page>

Just assume that this works fine in FireFox and when you view the same page in Internet Explorer there is a huge gap from the margin. Adding a simple keyword makes it to work across all browsers. Your visualforce page would now be like

<apex:page>
<style>
.styleme
{
  margin:o !important;
}
</style>
     <div class="styleme">
             Hi!!! I am styled!!!
     </div>
</apex:page>

This is just an example of how to use this keyword. Real scenarios may arise when you use your own CSS in conjunction with the Standard CSS of Salesforce. In such cases this keyword helps a lot.

Other uses of this keyword:

One other, major use of this keyword is when you want to override the Standard Styles of Salesforce.Say for example that want to override the color of the Page Block Header (this is transparent by default). The following code gives a red color to the header.

<apex:page>
<style>
.pbHeader
{
  background-color: RED !important;
}
</style>
     <apex:pageblock>
         <apex:sectionheader title="My custom Header"/>
     </apex:pageblock> 
</apex:page>

FIREBUG

Firebug is a great plugin for Firefox which comes in handy for debugging your pages. It helps you identify the associated style classes very easily.
You can download it from here .. Click here
It is using this plugin that i found that the styleclass for the pageblock header was 'pbHeader'.


How to use this???

When you open any normal salesforce page, click on the "bug" icon at the rightmost bottom of the page.

Then click on the select tool, like this


And then select the Element of which you want to know the styleclass.
Page Block Header in our case.



When you use this for Visualforce pages and have the "development mode" on your user page turned "on", make sure to remove the page editor by replacing your url with

htttp://cs1.salesforce.com/apex/samplevfpage?core.apexpages.devmode.url=1

This parameter removes the Page Editor and you get the clean CSS and HTML to analyze using FireBug.

Comments and Questions welcome!!!