Migrating from Internet Explorer 3.0 to Internet Explorer 4.0 and Later

ARCHIVED CONTENT: Compatibility is a key priority for Microsoft Internet Explorer 4.0 and later. As much as possible, we want to ensure that users who upgrade from Internet Explorer 3.0 will not be affected adversely. Goals for compatibility are:

• Compliance with existing World Wide Web Consortium (W3C) standards—Cascading Style Sheets (CSS), Level 1 (CSS1), HTML 4.0, and so on.
• Accurate rendering of content on the Web. Web site authors expect Internet Explorer 4.0 and later to render their pages as they designed them.

Users should experience the behavior they expect, and Windows Internet Explorer achieves this within the boundaries of the aforementioned goals. The combination of these factors and some bug fixes causes Internet Explorer 4.0 and later to render some pages differently from Internet Explorer 3.0. While we have kept these differences to a minimum, some issues are unavoidable.

The following sections outline the most salient differences that authors will encounter.

• General Authoring Issues 
• CSS Compatibility with Internet Explorer 3.0 
• Using Different Style Sheets 
  • Using Multiple Style Sheets 
  • Using @import 
  • Using the Document Object Model to Manipulate Style Sheets 
• International Issues 

General Authoring Issues

<META HTTP-EQUIV="expires" CONTENT="0">

<FORM METHOD="get" ACTION="https://www.Microsoft.com?value1=boo">

CSS Compatibility with Internet Explorer 3.0

Internet Explorer 3.0 introduced CSS to the Web with the first implementation of a working draft from the W3C. Since this time, the W3CCSS working group has published a CSS recommendation. The Internet Explorer 4.0 and later implementation of style sheets is based on the final CSS recommendation. What this means for authors is that the CSS implementation is a richer, complete implementation that also includes bug fixes and reflects any specification changes made from earlier drafts. The following is a list of issues that might affect authors who have authored pages using CSS in Internet Explorer 3.0. In some cases, we've fixed bugs, and in other cases there have been specification changes or clarifications.

Authors might choose to use separate style sheets for Internet Explorer 3.0 and Internet Explorer 4.0 and later. See the section following the table for ideas on how to use separate style sheets for each browser.

Using Different Style Sheets

Several techniques can be used to tailor your page for use in Internet Explorer 3.0 and Internet Explorer 4.0 and later using CSS.

This section describes three of them:

• Using Multiple Style Sheets 
• Using @import 
• Using the Document Object Model to Manipulate Style Sheets 

Using Multiple Style Sheets

To use this technique, observe these facts about Internet Explorer 3.0:

• Only a single style sheet is supported.
• The disabled attribute is not supported.

Define multiple style sheets using the STYLE or link element within a document. Add Internet Explorer 3.0 specific style information to the last style sheet defined in the document. Internet Explorer 3.0 uses the last style sheet it encounters. To prevent Internet Explorer 4.0 and later from using it, add the disabled attribute.

For example, given the following style sheet:

<STYLE TITLE="css_ie4">
   BODY   {font-weight:bold}
</STYLE>

<STYLE TITLE="css_ie3" DISABLED>
   BODY   {font-style:italic} 
</STYLE>

Internet Explorer 4.0 and later will set the content within the BODY of the document to bold, but Internet Explorer 3.0 will italicize that same content.

Using @import

Internet Explorer 3.0 does not support @import, so define Internet Explorer 4.0 and later specific styles in a separate file, and use @import to import them.

When Internet Explorer 4.0 and later loads a document containing the following HTML code, it will import and use the style sheet information in ie4specfic.css. Because the link element includes the disabled attribute, Internet Explorer 4.0 and later will not apply the styles. On the other hand, Internet Explorer 3.0 will use the styles defined in IE3specific.css because:

• It is the last style sheet encountered.
• The disabled attribute is ignored.

<STYLE>
   @import url(ie4specific.css);
</STYLE>
<LINK disabled REL="stylesheet" HREF ="ie3specific.css">

In the following example, Internet Explorer 4.0 and later uses the styles contained within ie4specific.css as well as the styles defined directly within the style tag. Internet Explorer 3.0 only applies the H1 and H2 styles.

<STYLE>
   @import url(ie4specific.css);
   H1  {color:green}
   H2  {font-style:italic}
</STYLE>

Using the Document Object Model to Manipulate Style Sheets

Internet Explorer 4.0 and later exposes styles and style sheets through the Dynamic HTML (DHTML) Object Model. Styles and style sheets can be added, styles can be removed, and style sheets can be disabled using any installed scripting language. To use this technique,

1. Check for Internet Explorer 4.0 or later at document load time.
2. Disable the first style sheet in the styleSheets collection.
3. Add a new style sheet.

The following code can be associated with the onload event of the BODY.

<SCRIPT>

function HandleOnLoad()
{
   cUA = window.navigator.userAgent;
   if (parseInt(cUA.substring(cUA.indexOf("MSIE ")+5, 
      cUA.indexOf( ".", cUA.indexOf ( "MSIE " ) ))) >= 4)
   {
      document.styleSheets[0].disabled = true;
      document.createStyleSheet("ie4specific.css");
   }
}
</SCRIPT>

International Issues

<FONT FACE="Arial">some double byte characters here</FONT>.