Investigating Document Mode Issues

  • Article

In the Enabling Standards Support topic, you learned that the document type of a webpage controls the features supported by the webpage. In order for Windows Internet Explorer and other modern browsers to enable all supported features, webpages must be in standards mode. Put your webpages into standards mode by declaring a standards-based document type, as shown in the following code example.

<!DOCTYPE html>

If your webpages do not declare a standards-based document type, features that require standards-support will not be displayed when viewed with Internet Explorer. If a webpage is not displayed correctly, you can use the F12 developer tools to troubleshoot the issue. In many cases, such problems are resolved by ensuring the webpage uses a !DOCTYPE directive to declare a standards-based document type.

This topic helps you learn how to use the F12 tools to research and identify a problem related to the document type of a webpage.

The Enabling Standards Support topic compared two webpages, including one similar to the one shown in the following image.

The design of this webpage includes the border-radius attribute, a Cascading Style Sheets, Level 3 (CSS3) attribute that displays rounded corners. In the current example, however, the corners of the objects are displayed with traditional, squared corners. This happens because Internet Explorer ignores Cascading Style Sheets (CSS) properties that are not supported by the document mode that is used to display a webpage.

Because IE5 (Quirks) mode does not support the border-radius property, Internet Explorer ignores the property when webpages are displayed in that document mode.

By using the F12 tools, you can explore a webpage after Internet Explorer has displayed it. This enables you to troubleshoot and identify problems like the squared corners that are shown in the previous image. This topic shows one way to identify similar problems and includes the following information.

  • Verifying CSS Attribute Values
  • Displaying Webpages in Different Document Modes
  • Related topics

Verifying CSS Attribute Values

To verify the CSS attribute values of an object in your webpage, complete the following steps.

  1. Press F12 to open the F12 tools.

  2. Click the Select element by click button and then click the object containing the CSS properties you want to verify.

  3. Click the Trace Styles button and review the attributes of the properties that you are interested in.

In this example, you are looking for the values of the child attributes of the border-radius attribute, specifically border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, and border-top-right-radius. Notice, however, that for this example, these attributes are not displayed.

This happens because the webpage is displayed in IE5 mode. In Windows Internet Explorer 9, the border-radius property is supported only in IE9 Standards mode. Because IE5 mode does not support the border-radius property, Internet Explorer ignores the property when displaying CSS attributes.

The next section shows how to verify this by changing the current document mode of the webpage.

Displaying Webpages in Different Document Modes

To use the F12 tools to display webpages in different document modes, complete the following steps.

  1. If the F12 tools are not already open, press F12 to open the tools. Notice that the current document mode is displayed in the right side of the menu bar of the F12 tools window.

  2. When you click the document mode menu button, a menu displays additional document modes that can be used to display your webpage.

  3. Click the Internet Explorer 9 standards option from the menu to display your webpage in IE9 mode. If you trace the style attributes for the previously selected object, the border-radius child attributes now appear with the other CSS attributes.

  4. When the webpage is displayed in the appropriate document mode, the webpage appears as intended and the div elements are displayed with rounded corners.

Remember that the F12 tools change only the way a webpage is currently displayed by Internet Explorer; they do not modify the original source code of the webpage.

If this was a problem with a production webpage, modify the underlying markup to include a !DOCTYPE directive that specifies a standards-based document type, as shown in the following code example.

<!DOCTYPE html>

Note  You can also use an "X-UA-Compatible" header to specify the document mode for a webpage. For more information, see Defining Document Compatibility.

 

The F12 tools provide a number of tools that help you to quickly troubleshoot and identify problems with your webpages. In this example, you used them to determine a problem related to the document mode of a webpage. For more information about the F12 tools, see Debugging and Troubleshooting Your Webpage.

Enabling Standards Support