HTML and CSS Reference
In-Depth Information
CHAPTER 14
■ ■ ■
Everything Falls Apart
K
nowing all the tips, tricks, hacks, browser quirks, optimizations, and the 347,982 methods
of combining them to form a layout doesn't offer much solace if your site appears mangled
when viewed in a popular browser. As important as all the advanced CSS techniques we've
covered are, the ability to troubleshoot and diagnose problems is equally important, and that's
what this chapter is all about. We're going to look at ways to narrow down the source of a prob-
lem (especially vexing when everything looks right in your code but not in the browser),
examine common mistakes made when working with CSS (and how to avoid them), revisit
some of the more common browser bugs we covered solutions for in Chapter 6, and then walk
through a CSS layout from creation, to testing, to finding problems and fixing them.
What to Do When You Don't Know What Went Wrong
It's usually easy to solve problems when there's an obvious answer, say, if the background color
of your page is blue when you meant it to be green (check the
background-color
declaration on
the
body
element), or your sidebar is on the right when you wanted it on the left (you probably
used the wrong float direction). However, when developing with CSS, problems and their solutions
are often much less obvious (for instance, when a
background-image
is set on your
body
element
but no image displays in the browser, or your floated sidebar is appearing below your content
in IE 6), and require a combination of a few handy tools and some logical thinking. The steps to
follow are usually along these lines:
•
Validate markup and styles
•
Disable styles in chunks
•
Disable hacks
•
Create minimal test cases
If you use the utilities and browser extensions described in this section and follow these
steps (which we'll cover in detail later in this chapter), you should be able to catch any error
during your development process.
293
