TOOLS - CSS: Professional Techniques for Modern Layout - page 24

Figure 1-25 depicts the Layout tab, which shows you the layout box for the element being
inspected. In addition to showing you the dimensions of the layout box, it will also tell you the
pixel values for various properties like offsetTop and scrollLeft .
26
Figure 1-25: Dragonfl y's comprehensive Layout tab.
WEB INSPECTOR (SAFARI)
If your primary development browser is Safari, then you'll want to call up the Web Inspector.
To activate the Web Inspector, go to Safari's Preferences, select Advanced, and then check the
box next to Show Develop menu in menu bar (shown in Figure 1-26). Once you've done that,
you can call up the Web Inspector by selecting Show Web Inspector in the Develop menu, or
else pressing Option+Command+I. As with Dragonl y, the keyboard shortcut isn't a toggle: If
Web Inspector is already open, you can't use the keyboard to close it. For that, you need the
mouse. Command+W doesn't work unless the Web Inspector is in its own window; try that
when it's docked in the main window and you'll close the whole window.