Showing posts with label cross browser compatability issues. Show all posts
Showing posts with label cross browser compatability issues. Show all posts

Saturday, February 4, 2012

HTML DTD for ICE faces JSPX


Resolving the browser compatibility issues while developing the web applications is a bit complex. Most of the times developer tries to write the browser specific code. But, it is not possible to implement the browser specific code for all the pages of the application in all the scenarios and it is not required if we specify the DOCTYPE. Specifying the doctype for the page will decrease the most of the browser compatibility issues.


A doctype declaration refers to the rules for the markup language, so that the browsers render the content correctly.


The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.


The doctype declaration should be the very first thing in an HTML document, before the tag.


There are different DTDs for the HTML page as specified below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">



Specifying the DTD on JSF page which developed using ICE faces might not accept as you specify on the normal HTML page. You have to place it after the declaration of f:view tag.



<jsp:root version="2.1" xmlns:jsp="http://java.sun.com/JSP/Page"          xmlns:f="http://java.sun.com/jsf/core"          xmlns:h="http://java.sun.com/jsf/html"          xmlns:ice="http://www.icesoft.com/icefaces/component">   
<jsp:directive.page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"/>   
<f:view>   
<ice:outputDeclaration doctypeRoot="HTML" doctypePublic="-//W3C//DTD HTML 4.01 Transitional//EN" doctypeSystem="http://www.w3.org/TR/html4/strict.dtd" />
<!-- Place the required code here --> 
</f:view>
</jsp:root>


Click here To Read more about fixing the browser compatibility issues.

Sunday, July 17, 2011

How to fix browser compatibility issues?

A normal developer never cares about the executing the application in different browsers while developing the application and he might doesn’t know that he will get lot of issues once the development is completed. This causes a big headache to him after completion of the application as he gets more number of cross browser compatibility issues and he can’t fix those instantly. 
Fixing the cross browser compatibility issues after completion of the project is night mare for the developer. He has to start fixing the issues from the starting stage of the application development.

Below is the small discussion to fix the browser compatibility issues for different browsers like Chrome, Internet Explorer and Mozilla Firefox.

Mozilla Firefox: 
The excellent feature that Firefox has is the add-ons. There are lot of add-ons you can add to Firefox in which Fire-Bug is the best add-on to fix the issues in applications while running in  the Firefox browser. When you install the fire bug add-on, one bug icon displayed on the right-bottom corner of the browser.
Once you open your application in firefox and click on the bug icon, you will see a window which contains html source code as shown in the below screenshot. The developer has to analyze the code which display on the firebug window and has to fix the issues.


The error console (Ctrl+sift+J gives the error console) of the firefox browser contains the java script errors in the site. Developer has to fix those errors by analyzing and debugging the JavaScript code.
Developer can fix the css related issues by modifying the css classes in the fire bug window.
You can view the fire bug window by just pressing the button F12.

You can read more about the Fire bug on http://getfirebug.com/whatisfirebug
 

Internet Explorer:
Microsoft is providing the developer tool along with the Internet explorer to analyze the issues in the IE. Once the proper analysis is done by the developer and he can fix the issues by updating the changes in javascript code or css classes.
Below screen shot shows the Internet Explorer developer tool. You can open this by going to Tools --> Developer Tools or by simple pressing the key F12.

You can read more on Internet Explorer developer tools on http://petelepage.com/blog/2010/06/internet-explorer-developer-tools/


Google Chrome:
By clicking on F12 button, you can open the Developer tool in the Chrome browser. Below screen shot shows the code analyzer of the Chrome browser.

You can read more on Chrome Developer tools on http://code.google.com/chrome/devtools/docs/overview.html 


I thought most of the cross browser issues comes with the javascript errors or javascript un supported methods in the browsers. If the developer cares about the javascript predefined functions while development, he can remove more number of cross browser issues.