I’m one developer on a visualization project using d3.js, which is pretty fantastic. I’m working on the control panel at present, which displays a series of buttons to the end user to allow them to filter out certain metrics in the data set. The buttons do a bit more than that, they’ve also got a nifty horizontal bar in them that indicates what percentage of that data is presently included. So if we were visualizing fast food data, and you filtered out Hamburgers the progress bar for McDonalds might drop down to 40%.
We have a bit of hierarchical data that lends itself well to nested drop downs. When the user hovers over a button for a while, I’ll display the drop down to let them explore the data in greater detail. Things were working well in Chrome, but my :hover pseudo-event never fired to display the drop down in Firefox. I spent a great deal of time trying to figure out why. My buttons seemed quite simple. <button> <div class=“drophead”>Food</div> <ul> <li>Hamburger</li> <li>Fries</li> </ul> <div class=“barchart”></div> </button>
My usual fallback when I can’t figure something out on the web, especially if there’s inconsistencies involved, is to validate. Validation revealed that my divs and uls were not valid children of the button element. Chrome managed to make this work, but Firefox had issues handling pseudo-events for these invalid children, so my drop downs didn’t work. Even though it worked in Chrome now, there was no guarantee that my invalid syntax would continue to function long term. I swapped the buttons out for divs, and asked a co-worker to help with some refactoring as divs don't allow value attributes as buttons do.
W3C Validator saves the day again.