Using Lights Out Highlighting
Next, you’ll use another feature in SuperPreview to make this comparison easier to see.
Click the Lights-Out Highlighting Mode button at the top of the screen to see the problem in full relief. In the comparison screen, everything except the selected element is grayed out.
Click the Box Highlighting button to the left of the Lights-Out Highlighting Mode button to return to the default view.
Changing Layout Views
Now you’ll change the layout view to see the comparison even more clearly.
Click the Horizontal Split Layout button to position the baseline browser on the top, and your comparison browser down below. The Horizontal Split Layout is useful when you want to closely inspect horizontal sections of your page such as a header or footer.
From the bar at the top of your screen, click the Overlay Layout button to overlay these pages on top of each other. In this view, you can see that the breaking down of the Case Studies section has actually enlarged the entire page.
Click your other comparison browsers while in the overlay layout view to see how the IE6 version is significantly different.
Click the Vertical Split Layout button to return to the original view.
Using Guides for Comparisons
The next feature will allow you to measure text between the comparison browser and the baseline.
Click IE7 as your comparison browser to IE8. Click in the vertical ruler on the left side of the screen, and drag out a guide so it aligns with the end of the letter ‘g’ in ‘Publishing’.
Note that like scrolling, SuperPreview guides are also synchronized and in this case, help you identify exactly how much difference there is between the letterspacing of your heading in the two browsers.