An overview of the DOM view
How to access SuperPreview’s DOM View
Testing Web Pages with SuperPreview: Module 4
Working with the DOM View
In this module, you’ll learn how to use the DOM view in SuperPreview to help identify problems in Internet Explorer 6 browser rendering.
Defining a Site in Expression Web
You’ll begin this module by defining a site in Expression Web 3.
Open Expression Web 3 and from the Site menu in Expression Web, choose Open Site.
In the Open Site window that appears, click the Browse button.
Navigate to the folder 04_SuperPreview_Dom. Click Open, and click Open again in the next window that appears.
In the Site View tab, double-click default.html to open this page in Expression Web.
An Overview of the DOM
DOM stands for Document Object Model and is the convention used in web design for how elements in a document are represented. Although the DOM applies to other documents as well, in your case, it is the HTML document that you are concerned about.
If you’ve worked with HTML at all, then you’re familiar with the concept of the DOM, even if you aren’t familiar with the name. The most basic html page has a set of rules that are always followed, these rules start with the organization of the elements, for example, the <html> tag is the parent container that all the other elements are nested within. Then there are other familiar tags such as the <head> and <body> tags. As you begin to add or nest additional elements such as paragraphs <p> and divs <div>, you begin to create a Dom tree: Nested elements which contain nested elements and so on.
SuperPreview exposes this DOM tree much the same way that the code view in an editor like Expression Web 3 does. When you pair SuperPreview’s highlighting methods with this DOM view you have an excellent tool for detecting which elements are responsible for creating layout problems in a browser.
Choose File > Display in SuperPreview.
In the Baseline area, confirm that your baseline browser (or the browser that you’d like to compare to) is set to Internet Explorer 8. If necessary, click the Close button to clear any other browser that may be selected and then choose IE8 as a baseline browser.
To compare this preview with other browsers, use the Zoom pull-down menu from the toolbar to zoom out to 62% so you can see the entire page clearly.
In the Comparison area, confirm that your comparison browser options are currently set to just Internet Explorer 6.
You are now comparing Internet Explorer 8 on the left, with Internet Explorer 6 on the right. Zoom out to 50% and look at the paragraph text in the FAQ section (in the center of each screen). You should immediately see a problem with the Internet Explorer 6 version. The paragraphs in the FAQ section are not wrapping around the links to their left as desired.
The IE8 paragraph text is wrapping correctly, the IE6 text is not.
If you have not had enough experience with HTML and CSS and working with browser issues in IE6, part of the problem is knowing where to start. This is where SuperPreview comes in. From a visual perspective it’s easy to identify and isolate areas that are problematic. Using the DOM view takes it a step further and identifies the names of the elements that are the source of the problem. This will make troubleshooting your code much easier because you will have narrowed the scope of your search.
In the bottom right corner of the SuperPreview window, click the tab labeled DOM and a new section will expand. (If this section was already open, simply click again to open it.)
To see the DOM tree in action, click the arrow to the left of the <html> tag to expand it. Then click the arrow to expand the body tag and then the element labeled <div id=”wrap”>. Expanding this element exposes the div elements that compose the structure of your page: topnav, masthead, container and footer.
Of course you have the page author to thank for the logical naming of these elements, because without doing anything else, you can use some process of elimination here and determine that the source of the layout problem is likely in the div with the id labeled container.
There is another clue that SuperPreview provides to confirm this theory. In the upper-right corner of the DOM panels is the label “<…> = hasLayout” which is orange. If you look at the elements listed you will see all the brackets are orange except for the container brackets. Of course this visual cue is only significant if you know what “hasLayout” is and why it’s relevant to IE6.