Sent by M. A. Sridhar on 6 January 2003 06:06
Hello folks,
First off, let me say I have learned a great deal from this list. Thanks
everyone.
I have been playing with using CSS for generating a simple bar chart. I have
appended an HTML file illustrating the idea. The problem is that IE renders
the chart as expected, but Mozilla 1.2 renders all bars with the same height.
I can't explain this difference, and would greatly appreciate your inputs on
this.
Thanks in advance.
Sridhar
----------------------------------------------------
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="Author" CONTENT="M. A. Sridhar">
<title>Chart test</title>
</head>
<style>
div.blueBar {
background-color: blue;
width: 10;
display: inline;
margin-right: 2;
margin-left: 2;
}
div.redBar {
background-color: red;
width: 10;
display: inline;
margin-right: 2;
margin-left: 2;
}
.barCell {
padding-left: 10;
padding-right: 10;
border-bottom: 1px solid black;
}
.chartContainer {
background-color: #eeeeee;
padding: 10;
margin: 10;
border: 1px solid #bbbbbb;
width: 400;
}
.yAxis {
border-right: 1px solid black;
}
.yAxisMarker {
height: 30;
font-family: Tahoma, Verdana, Arial;
font-size: 8pt;
}
.smallFontElement {
font-family: Tahoma, Verdana, Arial;
font-size: 8pt;
}
</style>
<body>
<div class="chartContainer">
<div style="padding: 10">
<b>Simple chart using CSS</b>
</div>
<table cellpadding="0" cellspacing="0">
<tr valign="bottom">
<td class="yAxis" align="right">
<div class="yAxisMarker">250 -</div>
<div class="yAxisMarker">200 -</div>
<div class="yAxisMarker">150 -</div>
<div class="yAxisMarker">100 -</div>
<div class="yAxisMarker">50 -</div>
</td>
<td align="center" class="barCell">
<div class="blueBar" style="height: 100"> </div>
<div class="redBar" style="height: 120"> </div>
</td>
<td align="center" class="barCell">
<div class="blueBar" style="height: 170"> </div>
<div class="redBar" style="height: 130"> </div>
</td>
<td align="center" class="barCell">
<div class="blueBar" style="height: 80"> </div>
<div class="redBar" style="height: 140"> </div>
</td>
</tr>
<tr>
<td></td>
<td align="center" class="smallFontElement">
Jan
</td>
<td align="center" class="smallFontElement">
Feb
</td>
<td align="center" class="smallFontElement">
Mar
</td>
</tr>
</table>
</div>
</body>
</html>
__________________________________________________
Do you Yahoo!?
Yahoo! Mail Plus - Powerful. Affordable. Sign up now.
http://mailplus.yahoo.com
