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.
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:
Code: Select all
<!DOCTYPE HTML PUBLIC "-W3C//DTD HTML 4.01//EN" "http://www.art.org/TR/html4/strict.dtd">Includes everything in the strict DTD plus deprecated elements and attributes. Here is an example to demonstrate what I am referring to:
Code: Select all
<!DOCTYPE HTML PUBLIC "-W3C//DTD HTML 4.01 Transitional//EN" "http://www.art.org/TR/html4/loose.dtd">Includes DTD and any entity. Again, here is an example that will explain this concept more clearly:
Code: Select all
<!DOCTYPE HTML PUBLIC "-W3C//DTD HTML 4.01 Frameset//EN" "http://www.art.org/TR/html4/frameset.dtd">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 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:
Code: Select all
Table { background-color: FFFFFF }Code: Select all
Table { background-color: #FFFFFF } For Page Backgrounds:
Code: Select all
<body bgcolor="#hexdec">Code: Select all
<font color="#hexdec">Code: Select all
<body text="#hexdec" link="#hexdec" vlink="#hexdec" alink="#hexdec">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:
Code: Select all
P {font-size : 14 px } Code: Select all
P { font-size : 14px } Code: Select all
.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:
Code: Select all
< DIV CLASS= “Nav”>
… navigation links…
</DIV>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.
source: DevArticles
