Get to the bottom of your CSS difficulties with smart Firefox extensions.
Since its debut, CSS browser compatibility issues have given web developers headaches. Support for CSS in contemporary browsers such as Firefox is very good, but there are still inconsistencies between different browsers, at least until the whole world wakes up to how good Firefox is. You'll have to deal with that.
Firefox's extensible design has encouraged the development of a number of indispensable extensions to help you troubleshoot and tweak your CSS. In this hack, we'll look at how two of these, Web Developer and EditCSS, can help you quickly track down exactly which CSS statements are causing problems.
The Web Developer extension, by Chris Pederick, is available at update.mozilla.org or here, and includes some EditCSS functionality:
The EditCSS extension, by Pascal Guimier and others, is available at update.mozilla.org and also here (beware version differences):
Install them as you would any other Firefox extension [Section 1.2, at the beginning of Chapter 1]. The EditCSS will perhaps be bundled inside the Web Developer extension eventually, but for now it is still available separately. Check the home pages for both extensions.
The Web Developer extension places a number of menus in a ...