Practical Strategies for Debugging Cross-Browser Display IssuesLori DirksExpression Community ManagerMicrosoft Corporation

SESSION CODE: WEB309

Planning for Cross-Browser Success

Identify troubleTest, test, test

Diagnose the situationKnow where the potential pitfalls are and what causes them

Correct courseTackle problems when they arise

Why Don’t More People Test?

Reasons include:Inconvenient

Interrupts workflow

HardHard to install different versions of browsers side-by-side

ExpensiveMultiple monitorsMultiple machinesMaintain multiple virtual PCs

A New Tool in the Toolbox: SuperPreview

DEMO

A New Tool in the Toolbox: SuperPreviewLocal Browsers

Firefox, installed versionsInternet Explorer 6Internet Explorer 7Internet Explorer 8 > 7 Compatibility ModeInternet Explorer 8

CompositionsImages and PSD Files

SuperPreview Beta Online ServiceMac Safari 4

SuperPreview Debugging Tools

Identify troubleSide-by-side visual displayOnion skin overlay

Diagnose problems and causesElement highlightingPosition and size detailsDOM tree information

A Practical Approach to Debugging

Three step process:

Identify display differences

Diagnose problems

Fix

(repeat)

SuperPreview In Action

DEMO

Doubled Float-Margin

Issue: When you have a float with a margin specified in the same direction, IE6 doubles it

For example, a right float with margin-right:10px is displayed with a right margin of 20px

Solution:Apply display:inline to the elementChange the margin to padding

Conditional CommentsIt’s a good practice to put cross-browser code into conditional comments

For the doubled float-margin example:<!—[if IE 6]>

<link rel=“stylesheet” type=“text/css”href=“ie6.css” /><![endif]-->

ie6.css#aboutus {

display:inline;}

SuperPreview In Action

DEMO

Expand-to-Fit Content

Issue: When content would otherwise overflow the container, IE6 expands the container to fit the content

If an element is specified larger than the containerIf an image is larger than the containerIf an unbreakable word exceeds the container size

Solution: depends on the underlying causeChange the element to fit the containerSet the container to overflow:hidden;Set a conditional comment to break very long words

SuperPreview In Action

DEMO

hasLayoutSuperPreview shows whether an element hasLayout or not, enabling you to try toggling the property to resolve issues

hasLayout is an IE6 and IE7 property that determines how elements: Draw and bound their content, Interact with other elements

Issues caused by having and not having layout include:Float display issuesList numbering and spacing discrepanciesBackground image positioning differences

Comprehensive discussion: On Having Layout, http://www.satzansatz.de/cssd/onhavinglayout.html

SuperPreview In Action

DEMO

Common Cross-Browser Issues

DOCTYPE declarationAffects browser rendering choices

Doubled float-marginContent renders correctly, but is out of place

Expand-to-fit contentElements are larger than expected, or out of place

hasLayoutUnexpected rendering issues

What’s Next

Try out SuperPreviewDownload the Expression Studio 4 Web Professional Trial (60 day trial), http://www.microsoft.com/expression/try-it

Identify, Diagnose, Correct

Stay out of the trees

Cross-Browser Resources

Chris Coyier’s CSS Tricks, IE CSS Bugs That’ll Get You Every Time, http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/

CSS Differences in Internet Explorer 6, 7, and 8, http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/

Position is Everything, http://positioniseverything.net

Track ResourcesASP.NET – http://www.asp.net/ Silverlight – http://silverlight/ Expression – http://www.microsoft.com/expression/ Internet Explorer – http://www.microsoft.com/windows/internet-explorer/default.aspx

Resources

www.microsoft.com/teched

Sessions On-Demand & Community Microsoft Certification & Training Resources

Resources for IT Professionals Resources for Developers

www.microsoft.com/learning

http://microsoft.com/technet http://microsoft.com/msdn

Learning

Complete an evaluation on CommNet and enter to win!

Sign up for Tech·Ed 2011 and save $500 starting June 8 – June 31st

http://northamerica.msteched.com/registration

You can also register at the

North America 2011 kiosk located at registrationJoin us in Atlanta next year

© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to

be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

JUNE 7-10, 2010 | NEW ORLEANS, LA