Bar graph problem in IE

It may just be me, but on viewing the page source I couldn't see the statistics_trends.css file getting imported anywhere - perhaps that's the problem ? I added the contents of the css file to my site-wide css file, and the bars showed up fine...

Umm, re-reading this I think I understand what you mean now, but I'm still confused: from your description the grey part of the graph indicates the number of hits (i.e. size of the grey part is larger the larger the number of hits is), but on my site it shows up the other way around (the black part is larger the larger the number of hits is). Or am I misunderstanding you ?

And I think I see the problem you're describing now, too - the grey part at the top of graphs is never smaller than a certain minimum. Looking at it I'm wondering if this is to do with the font size, actually - perhaps the height of the div can never go below the current font size in case any text needs to be put in the div. I can't try this at the moment, but see if code like

<div style="height: 44%; font-size: 1px;" class="foreground">

(or a font-size change to the foreground class in the css file) makes any difference ?

Axel Bruns (snurb.info)

Argh. That was meant to be:

<div style="height: 44%; font-size: 1px;" class="foreground">

Axel Bruns (snurb.info)

Got it now ! As I thought, the reason for the bars never stretching to 100% length in IE is linked to the font size within the divs. Looks like even if the hits bar is meant to be at 100%, there's always still an empty space above it that inherits the height of the font which would be displayed within the divs (even though they're empty...).

Here's a fix - change the css to:

.statistics-trends .bar {
  width: 5pt;
  height: 50px;
  background-color: #000;
  font-size: 1px;
}

.statistics-trends .bar .foreground {
  background-color: #ddd;
  width: 5pt;
  font-size: 1px;
}

This renders properly in IE (check my site at snurb.info for example). Not sure about other browsers, though.

Technically, this still leaves a one pixel empty space at the top of bars, even if they're meant to be 100% in height, but I think that's the best we can hope for (setting the font-size to 0px doesn't work, which is probably fair enough :-). I've also had to change the width attribute for the bars to a point value, rather than measuring it in ems - the original value of 0.5em would equate to 0.5px now... Instead of the 5pt value I've chosen, you could go for 5em or something similar as well, I guess.

Hope this helps !

Axel Bruns (snurb.info)

I really have to learn not to post before I'm done... Here's a further fix that deals with the width of the bars - we can just remove the width attribute from the css altogether, and the width of the bars will adjust itself to 100%/number of bars, which looks much nicer (see my site as an example). So:

.statistics-trends .bar {
  height: 50px;
  background-color: #000;
  font-size: 1px;
}

.statistics-trends .bar .foreground {
  background-color: #ddd;
  font-size: 1px;
}

The only thing I'm not sure about is why the rightmost bar of the 24 hour graph is wider than the other 23 - might be a calculation error in IE ?

Axel Bruns (snurb.info)

Excellent - somehow the new css file seems to have fixed the unequal width problem for the bars...

One last suggestion: I liked having a small space between bars, to give them a little distance from one another - to make this really nice and small, I added the following to .statistics-trends .bar in the css:

  border-right: 1px solid #ddd;

(Again, you can see it in action on my site.)

Axel Bruns (snurb.info)