Click the IE icon for Explorer 7 as your comparison. You’ll now focus on isolating the text wrap problem you identified in the previous exercise. Click the middle FAQ paragraph in the baseline (Internet Explorer 8) view. (Starting with the text ‘It’s the float model problem’)
You are now in Box Highlighting mode by default. In Box Highlighting mode, the selected area becomes highlighted, and values are displayed in the quick position display below the highlighted area. These values represent the total size of the selected element, as well as its positioning from the top and left margins of the page.
Scroll over to the Comparison view, and note that this paragraph and its container are highlighted (in green), however the blue outline (representing the container from IE8) extends to the left edge of the screen. This helps isolate that there is some issue with the way this paragraph element is being interpreted in IE6.
Additionally, for further confirmation, the quick position display in the IE6 window has values highlighted in red, this represents the size and position values of the paragraph that are different. In addition to the size being narrower, the left value of the paragraph is 115, meaning that unlike IE8, this text is not starting at the edge of the page.
Using Lights Out Highlighting
Now you’ll use another method to more easily see the differences between these two previews.
In the toolbar at the top of your screen, click the Lights-Out Highlighting Mode button to launch this view.
In Lights Out view, the elements are highlighted in relief so that you can easily see the problems with them.
It’s also important to note that clicking on an element to highlight it works both ways. In the IE6 comparison screen, click the same paragraph to select it. Now the highlight mode shows you how the position of the paragraph contrasts with the page in IE8. No new information is learned here necessarily, it’s just another view of the same problem.
Click in the third paragraph of the FAQ section to see the problem there, clearly highlighted.