Microsoft Expression Web SuperPreview is a legacy visual debugging tool designed to help developers identify and fix cross-browser layout inconsistencies. It allows you to render and compare web pages across different browser engines simultaneously without leaving your local environment. Key Features for Debugging
Baseline vs. Comparison Layouts: You set a “Baseline” browser (e.g., Firefox) and view your layout side-by-side or stacked with a “Comparison” browser (such as legacy Internet Explorer versions).
Overlay Mode: This feature stacks two browser renderings directly on top of each other. By modifying the transparency, you can instantly see pixel-level alignment failures or broken containers.
DOM Highlighting: When you select an element in Selection Mode, SuperPreview highlights the bounding box in blue on the Baseline view and green on the Comparison view. This makes tracking shifted or broken containers much easier.
Layout Instrumentation: Built-in rulers, guides, zooming, and panning tools allow you to measure exact pixel discrepancies across rendering engines.
Element Property Inspection: SuperPreview displays an element’s tag, exact size, position, applied CSS styles, and position in the Document Object Model (DOM) tree to target exactly where code adjustments are needed. Step-by-Step Layout Debugging Workflow
To debug a layout issue using SuperPreview, follow these sequential steps:
Launch SuperPreviewOpen your project inside Microsoft Expression Web. With your problematic HTML page open in the editor, navigate to the file menu and select File ➔ Display in SuperPreview.
Establish the Baseline BrowserClick on the browser icons in the left-hand pane to set your baseline. This should be the browser where your layout displays perfectly (typically a standards-compliant engine like Firefox or Safari).
Choose the Comparison EngineSelect the secondary browser engine you want to test against (e.g., Internet Explorer 6, 7, or 8). SuperPreview will automatically render the page locally using both engines.
Select a Viewing ModeToggle between Vertical Split (side-by-side Layout), Horizontal Split (one above the other), or Overlay Mode using the layout toolbar icons depending on how you prefer to scan for visual errors.
Pinpoint Layout DiscrepanciesTurn on Toggle Ruler Visibility to drag visual guide guidelines across the screen. Move your mouse cursor over elements; look at the DOM tree pane to see if nested
Implement Code AdjustmentsOnce you find the layout bug (such as a classic IE double-margin or broken float bug), return to Expression Web’s code view. Apply your CSS layout patch (e.g., adding display: inline to fixed-width floated elements) and save your changes.
Refresh and VerifyReturn to SuperPreview and press Ctrl + R (or click the green Refresh arrow) to regenerate the layout preview and confirm that the fix resolves the alignment discrepancy.
If you are currently troubleshooting a specific broken section on your site, let me know what layout issue you are encountering (e.g., columns dropping, overlapping text, broken menus) so I can help you target the necessary CSS fix.
Leave a Reply