CSS Vertical Bar Graphs

This graph is made with CSS and unordered lists and is based on one of Eric Meyer's designs.The use of the 'title' tag within each list item shows the month, year, and monthly total on mouseover.

While no images are needed to make the chart Eric has used a PNG as a background image for a nice gradient effect. However, IE 6 doesn't support the alpha transparency feature of PNGs. Since the difference between using the PNG or not using is subtle, depending on one's monitor, and since it doesn't work on IE 6, I don't think the PNG version is worthwhile. If you're not going to do this in CSS only with no images, might as well make a 9x2 pixel gradient in the proper color for each bar of the graph. It looks best, and it works with short-bus browsers.


Ask a Librarian Chat and Email Totals 2003-2008

View the chart with the PNG, without the PNG, or with a 9x2 pixel gradient image for each bar color.

Valid XHTML 1.0 Transitional