Monday, July 13, 2009

Tips for Cross Browser Compatibility

1. All HTML controls in the page should have an ID attribute.
Example: <.... type="”text”" name="”txtname”" id="”txtname”">


2. Always use fixed width and height rather than percentages.
Example:
Fixed width: <.... width="”600”">......< /table>
Percentages: <.... width="”70%”">......< /table>


3. All the elements in the page should be bound in a proper html layout.
Example:
Correct: <..><..><..><..>< id="”test”">< /span>< /td>< /tr>< /table>< /body>
Wrong: <..><..><..><..>< /td>< /tr>< /table>< id="”test”">< /span>< /body>

4. Modal windows does not work properly in firefox. Use normal pop up windows instead.
Example:
window.open(....) works well in all conditions. ShowModaldialog does not work properly.

5. parent.dialogArguments does not work in firefox. Use parent.opener instead.
Example:
var strVals = parent.opener ? parent.opener : parent.dialogArguments;
strVals.callfunction()

6. While accessing html elements in javascript,
do not use document.forms[0].......Use document.getElementById(...)
do not use document.all(....). Always use document.getElementById(...)

7. window.event does not work in firefox. Instead we should pass the event to the calling javascript function and access using event.target.
Example:
< type="image" src="images/SFReset.gif" id="img2" name="img2" onclick="”ResetFields(event)”">
function ResetFields(e)
{
if (window.event)
var xButton = window.event.srcElement;
else
var xButton = e.target.name;
}

8. Automatic reload of the page does not work in some situations. Use Ajax in such cases.

9. SQL Reporting services reports frame width is height is shrinked in firefox.
To increase the frame height and width,
Go to Program Files → Microsoft SQL Server → MSSQL3 (Differs for different versions of sql server. Purpose is to locate Reporting Services folder) → Reporting Services → Report Server → Pages
Open ReportViewer.aspx
Add width and height attributes to the custom report viewer control.
Example: RS:ReportViewerHost width="1000px" height="860px" id="ReportViewerControl" runat="server">

10. semicolon in “nbsp;” is a must.

11. In javascript, use "getFullYear" whereever you use "getYear".