Firefox's growing market share provides just one strong argument among many for not designing for a single browser anymore. But how compatible is your website, and what can you do to make it work better with a variety of browsers? Anthony Hart explains the dangers of outdated DOCTYPE, and how to avoid them.
What All Designers Face
You have created a website that will promote yourself and/or a product like no one has ever created before. You take the time to craft all of the proper CSS to govern the way you wish the site to materialize; you vigilantly use the Document Object Model to manipulate dynamic elements on the site; you even spend the time to optimize the site so that it will be found on the most-used search engines on the planet. You have gone to all this effort to sell your website to the masses on the Information Super Highway...but your website does not function in the latest browsers. By “latest browsers,” we mean browsers such as Mozilla, Opera, Netscape 6 and 7, Internet Explorer and Apple’s Safari.
It has been documented over the course of Web design history that defective DOCTYPE was and still is the cause of this compatibility issue among advanced Web browsers today. This article offers a solution to end the upsetting events you have been through because of the DOCTYPE you are using for your website only works with older versions of Internet Explorer. What I have tried to accomplish with this article is to provide actual examples of the proper way to use DOCTYPE, screenshots of genuine cases where DOCTYPE has been used to eliminate the browser compatibility issues. I will also suggest several outside solutions not covered in this article for your further review.
Stop Beating Yourself Up and Read
To establish a foundation of understanding, DOCTYPE, which is short for document type declaration, informs the validator which version of XHTML you have used, which must appear at the top of every Web page. Please note: DOCTYPE’s are key components that compliant Web pages must have in order to be read by those latest browsers mentioned above. According to The Beginner’s Guide to Creating DOCTYPE, here are the three most common usage of this declaration:
HTML 4.01 Strict Document Type Definition DTD:
This version includes all elements and attributes that have not been deprecated or do not appear in the frameset documents. Here is the example to illustrate what I am referring to:
<!DOCTYPE HTML PUBLIC "-W3C//DTD HTML 4.01//EN" "http://www.art.org/TR/html4/strict.dtd">
HTML 4.01 Transitional DTD:
Includes everything in the strict DTD plus deprecated elements and attributes. Here is an example to demonstrate what I am referring to:
<!DOCTYPE HTML PUBLIC "-W3C//DTD HTML 4.01 Transitional//EN" "http://www.art.org/TR/html4/loose.dtd">
HTML 4.01 Frameset DTD:
Includes DTD and any entity. Again, here is an example that will explain this concept more clearly:
<!DOCTYPE HTML PUBLIC "-W3C//DTD HTML 4.01 Frameset//EN" "http://www.art.org/TR/html4/frameset.dtd">
The Proof is in the Pudding
Recent examples of DOCTYPE that include a full URL instruct these browsers to render your page in a standards-compliant mode, treating your XHTML, HTML, XML, CSS and DOM as you expect them to be handled. Using defective or obsolete DOCTYPE, for example a declaration with relative links not established within your site (such as: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""DTD/xhtml1-strict.dtd">) will cause these very same browsers to be alerted to run in what we call “quirk” mode. For more information regarding which browser will alert in Quirk Mode, please reference the diagram below:
Figure 1 – Examines which DOCTYPE used on what Platform will alert in Quirk Mode
Figure 2 – Examines again which DOCTYPE used on the Mac version of Internet Explorer 5 will alert in Quirk Mode
It was developed as a norm back in the 1990s that a browser will assume you have written an old-fashioned or invalid string of code and handle this invalid markup as best as it can. Having said that, the browser will attempt to parse your page in a backward non-compatible fashion, rendering your CSS as it might have looked in Internet Explorer 4, and reverting it to a more proprietary, browser–specific DOM.
Just as an aside: Internet Explorer reverts to the Internet Explorer DOM, while Mozilla and Netscape 6 reverts to something more difficult to describe. The Opera browser does not play by these rules; it always attempts to render pages in standards–compliant mode. Clearly, this is not what you want, but it is often what you’ll get due to the prevalence of incorrect or incomplete DOCTYPE.
More Useful Examples
Below I have provided another example of expectable uses of DOCTYPE (provided by our friends over at ALA):
Figure 3 – Demonstrates the other correct conventions of DOCTYPE
So now that we have you all caught up on the proper and improper ways to incorporate DOCTYPE into your everyday Web designing life, I digress to cover the most focal issue you will encounter when using Internet Explorer 6 and the DTD…Cascading Style Sheets. I picked Windows as the medium of choice to address solely on the basis that most of us (designers) use Internet Explorer to exhibit our work (regardless of what you think of open source, it is still the browser used by the vast majority of Web surfers). For that reason alone, I have gathered the essential tools to suppress the pain of using Internet Explorer 6.
The Truth about Internet Explorer 6
The most significant modification in my mind is the addition of dual CSS rendering engines, which will help IE6 comply with the guidelines set forth by the W3C. Any changes causes some discomfort, however. At least one of these discomforts will undoubtedly create mayhem among Web pages whose very life depends on how their style sheets are set up and what DTD is defined. The three main categories that changes have rippled through are among: Hexadecimal Color Codes, Font Size Definition, and Case sensitive CLASS and IDs.
In the case of Hexadecimal Color Codes, you must remember now to place a pound symbol (#) at the start of the code. No more is the infamous RGB color code to look like this:
Table { background-color: FFFFFF }
Now the code must be represented with the (#) symbol as shown below:
Table { background-color: #FFFFFF }
Here are some examples of proper usage of Hexadecimal Color Codes:
For Page Backgrounds:
<body bgcolor="#hexdec">
For Text Colors:
<font color="#hexdec">
For Page-Wide Link and Text Colors:
<body text="#hexdec" link="#hexdec" vlink="#hexdec" alink="#hexdec">
(where text is text color, link is non-visited link color, vlink is already-visited link color, and alink is the color a link turns at the second it is clicked)
With reference to Font size Definition, no longer will you be able to have blank white space within the font size definition as shown below:
P {font-size : 14 px }
Above, you can see that white space exists between the number classification and the classification type. Below you will find the proper way to incorporate the appropriate tag:
P { font-size : 14px }
Last but not least we tackle the case-sensitive CLASS and IDs. This is perhaps the most critical of all to ensure proper practices. In this example I have defined a class for a navigation bar to be as follows:
.nav { font-family : Arial; font-size : 14px }
Later we will assign this class to the navigation area by wrapping a DIV tag around our navigation links, like in the example below:
< DIV CLASS= “Nav”>
… navigation links…
</DIV>
Since class names are now case-sensitive, the new rendering engines will no longer associates the ".nav" class with the reference in our DIV tag. This will cause some stir, since it will most definitely become the reason why we lose all style definition for the navigation area, but this is a problem that we can bear for the time being. Although these changes aren't the only differences, they may be the ones you'll most likely encounter. To see a full list of differences, see the reference on Microsoft's Web Site that the company has put together. It will make a big difference in how you view these new rendering engines.
Food For Thought
I understand that I have tackled this issue from one perspective and may not have included the other browser compatibility issues out there, but I wanted to focus this article on the most common mistakes of HTML coding being used and duplicated…tied in with the headaches and pains of the new IE 6. If there are other practices that I may not have mentioned that also combat this issue, please feel free to post comments to this article outlining those non-conventional methods to suppress those darn Browser Compatibility Issues.
By Anthony
Source: devarticles.com
Comments (2)
good article..
Many inexperienced web developers often skip over or miss-understand the importance of DOCTYPE declarations. It is of crucial importance in today’s web development world to properly define your markup. I have also addressed this issue on my blog, as many CSS tricks and demos will not work if people use the wrong DOCTYPE declarations. http://www.zachgraeve.com/2008/06/23/importance-of-proper-doctype-usage/