Usually its IE, these days, that consumes my spirit as I try to make pixels submit to my command.  Back in the Netscape days (thank goodness that browser is long gone), IE seamed like it could do no wrong because Netscape was such an example of code gone wrong.  Now Firefox gets the same holier than thou reputation. 

I’m creating a range bar chart in html.  Why Html?  Well, because we already purchased Dundas.  SInce it cost as much as a full MSDN license, we aren’t at liberty to try competitive tools.  Not to slander too hard but D is such a pain in the ass that I’d rather draw raw html than attempt a chart in that throw-back to Netscape quality and expected behavior.  Note to tools vendors and their developers and project / product managers.  Usability testing is your friend.  Just because the developer who wrote the code can make it render a really nifty chart does not mean your product is meeting the needs of the public.  You have to bring in real users to see what comes when they try to implement the feature…  (if only I always took my own advice)

A range bar chart is just boxes so why not draw with html?

The problem

Notice the second bar.  Isn’t 9.3 less than 10?  Hmmm…  Inspecting the html in Firebug reveals that the percentages are correct.  No matter what I do, the larger bar stretches just a hair further than it should and winds up below the bar low to its right.  If I reduce the range, things clean up. 

FireBug also revealed that setting the font-size to a very small number inside the font-less tables fixes this weird issue. 

        TABLE.barchart{
            height:100px;
            width:100%;
            border-collapse: collapse;
            table-layout:fixed;
           font-size:1px; /*setting this fixed incorrect bar height in ff*/
        }

Oooooo, thas mo’ bettah!

Don’t look a gift horse in the teeth

I have no idea why that makes any difference.  Perhaps someone has an idea?  I really don’t care!  It worked.  I can move on.  I don’t necessarily like having css in my stylesheet that is noting but a hack but there are certainly a few "IE Hack"(s) so why not stuff in one "FF Hack" ?

This entry was posted on Tuesday, July 8th, 2008 at 1:12 pm and is filed under Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.