Hiding Firebug Lite controls in browser

I started getting extremely tired of the FireBug Lite overlaying content in some of my legacy websites. By taking a look at the markup it was adding, I found a quick and easy way to hide it for most users.

Adding the following to one of your CSS files should do the trick…


/* Begin hide FireBug Lite */
#jsConsole,
#jsConsoleShowSourceButton,
#jsConsoleHideSourceButton,
#jsConsoleShowConsoleButton,
#jsConsoleHideConsoleButton { display:none; }
/* End hide FireBug Lite */

NOTE: I have not yet confirmed, but this approach should work in other browsers such as MSIE, Chromium and Safari that also may use FireBug Lite.