Transcript Practical Strategies for Debugging Cross

Practical Strategies for Debugging
Cross-Browser Display Issues
Lori Dirks
Expression Community Website Manager
http://expression.microsoft.com
Twitter.com/msexpression
[email protected]
Practical Debugging
• There Are No Easy Answers*
• It Takes Hands-On Tinkering
– Find the suspect elements
– Learn to identify the most common problems
– Rely on the wisdom of others
• There are few novel bugs, many documented solutions
• Experiment with workarounds
• Draw a Line
– Older browsers don’t need to be “pixel perfect”
matches; they do need to be functional
* Just suggestions, tools, and resources.
New Tool in the Toolbox
• SuperPreview
– Firefox (installed version)
– IE6 + installed IE version(s)
• IE8
• IE8 > 7 Compatibility Mode
• Browser Comparisons
–
–
–
–
Side-by-side
Onion-skin Overlay
Element highlighting
DOM Tree
Common Issues
• DOCTYPE declaration
– Double-check your DOCTYPE declaration
• Doubled Float-Margin
– Is your float rendering correctly, but appears in
the wrong place?
• Expand-to-Fit Content
– Is your element larger than expected?
• hasLayout
– Are elements behaving unexpectedly?
Doubled Float-Margin
• Issue: When you have a float with a margin
specified in the same direction, IE6 doubles it.
– For example, a left float with margin-left of 10px is
displayed with a 20px left margin
• Solution:
– Apply display:inline to the element, or
– Change the margin to padding
Conditional Comments
• Good Practice to Put Cross-Browser Code into
Conditional Comments
• For Doubled Margin Float in Green Apple:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
• ie6.css
#aboutus {
display:inline;
}
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 container
– If an image is larger than the container
– If an unbreakable word exceeds the container size
• Solution: depends on the underlying cause
– Change the element to fit the container
– Set the container to overflow:hidden;
– Set a conditional comment to break very long words
hasLayout
• SuperPreview 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 issues
– List numbering and spacing discrepancies
– Background image positioning differences
• Comprehensive discussion: On Having Layout,
http://www.satzansatz.de/cssd/onhavinglayout.html
What now?
• Try out SuperPreview
– Download the Expression Web 3 Trial (60 day trial),
http://www.microsoft.com/expression/try-it
– Download the free, IE-only version (never expires),
http://www.microsoft.com/downloads/details.aspx?Fa
milyID=8e6ac106-525d-45d0-84db-dccff3fae677
• Check your sites and your friend’s sites
• Learn a little bit more
More 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-everytime/
• CSS Differences in Internet Explorer 6, 7, and 8,
http://www.smashingmagazine.com/2009/10/14/cssdifferences-in-internet-explorer-6-7-and-8/
• Position is Everything, http://positioniseverything.net
Coding For Flexibility
• Handcrafted CSS, More Bulletproof Web Design
– Dan Cederholm and Ethan Marcotte
• Bulletproof Web Design: Improving flexibility and
protecting against worst-case scenarios with
XHTML and CSS
– Dan Cederholm
• Designing with Web Standards
– Jeffrey Zeldman
Useful Tutorials and Tools
• A List Apart, http://alistapart.com
– Code, Content, Design
• 456 Berea Street, Roger Johansson
http://456bereastreet.com
– CSS, Accessibility, Web Standards
• Jim Thatcher, http://jimthatcher.com/site_resources.htm
– Accessibility, Regulatory Compliance, Standards
• Color Contrast Check,
http://www.snook.ca/technical/colour_contrast/colour.html
Questions?
• Questions? Comments?
• More Questions or Comments?
– Email me at [email protected]
• Evaluation Forms, please fill one out