Dreamweaver CS6: The Missing Manual

Chapter 10. Troubleshooting CSS

Cascading Style Sheets are the most important technology in a web designer’s toolkit. Unfortunately, they’re also the source of many frustrations. As you pile style upon style in your site to transform drab HTML into beautiful web pages, you increasingly run the risk that those styles may interact in ways you don’t expect. As discussed in Chapter 8, the CSS concepts of “inheritance” and the “cascade” dictate how styles interact on a page, and those concepts have their own complicated rules. Adding to the confusion, different browsers can display CSS differently—this is especially true with older versions of Internet Explorer. Even newer browsers exhibit some frustrating inconsistencies in how they display CSS.

In this chapter, you’ll look at Dreamweaver’s tools for diagnosing CSS problems, as well as common problems you’ll encounter as you build the kinds of CSS layouts discussed in the previous chapter.

Note

Dreamweaver includes a Check Browser Compatibility tool. It’s intended to warn you when the CSS in your web page won’t work in a particular browser. Sounds good, right? It would be if it worked, but it doesn’t. The information it provides is outdated (mostly covering Internet Explorer 6), and the “community” part of the tool (which allows people to add browser compatibility information to the Adobe website) is littered with off-topic posts.