Using Proper DOCTYPE to Fix Browser Compatibility Issues - The Truth about Internet Explorer 6
(Page 4 of 4 )
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.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 20 
