O'Reilly logo

Firefox Hacks by Nigel McFarlane

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Hack #44. Tweak and Troubleshoot CSS Designs

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.

Install Must-Have Extensions

The Web Developer extension, by Chris Pederick, is available at update.mozilla.org or here, and includes some EditCSS functionality:

http://www.chrispederick.com/work/firefox/webdeveloper/

The EditCSS extension, by Pascal Guimier and others, is available at update.mozilla.org and also here (beware version differences):

http://editcss.mozdev.org/installation.html

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.

Use the Web Developer Toolbar to Locate Style Rules

The Web Developer extension places a number of menus in a ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required