• A Gotcha when using FireBug with Legacy HTML
    10/13/2009 5:55PM

    Firebug absolutely rocks. When tracking down the effects of errant CSS cascades, html quirks, DHTML side effects, etc, nothing beats Firebug. 

    However, today I ran into a little gotcha that consumed a few hours of my life. I wanted to align some drop downs and input fields nicely for the admin side of a new microblogging twitter/facebook/digg type component for formVista.

    The backend of formVista has a bunch of legacy code. Parts of it were written close to 10 years ago. Slowly as we develop out the new moderinzed FVML tag set, we're going through and updated the very dated looking backend components.

    I figured it was some style that was cascading down. Some margin, padding or alignment. Firebug showed nothing. I edited the styles inline. No joy. No matter what styles I applied the form fields displayed in the center of the form. I started to believe maybe I had run into a CSS bug in Firefox. 

    Then I realized the culprit. In formVista, components are hosted on pages but are completely separate. As a result, I don't spent alot of time actually looking at the HTML pages themselves. I focus on the component FVML files where all the work happens. The hosting HTML pages are just wrappers.

    Legacy wrappers.

    The page in question, where my newly styled component was living, used an ancient table based layout.

    <table width="100%">
    <td valign="top" align="center">

    And therein lies the problem. The align="center" was cascading down and overriding my styling. My guess is that firebug doesn't have a way to handle this case, or that I'm missing something in it's use.

    Re-arrange the hosting page to use a CSS layout and problem solved.