• Locked
No replies
Sun, 2004-08-22 00:40
quince
Offline
newbie
Last seen: 17 years 50 weeks ago
Timezone: GMT-4
Joined: 2004-08-20
Posts: 2
Points: 0

First of all, thanks for the help I've gotten here just lurking. But I've come across a baffling one.

This is supposed to be a graph, done completely using CSS, and it works fine in IE, which makes me suspicious. I just can't get the columns to gain any weight beyond a couple pixels for Firefox, though. Nor does either browser place them at the bottom of the containing <div>. (Actually, you can make IE do it by taking out the &nbsp;. but then the colored columns go away completely in FF.)

Am I taking advantage of an IE bug here? Because I'd really like to keep it this simple if possible (it's an element of a larger page). Any simple way to make it work in FF? As a challenge, I'm trying to do this without <table>...

Thanks, here's the code:

<html>
<head>
<style>
.graphcontainer {
	width: 115px;
	height: 140px;
	margin-left: auto;
	margin-right: auto;
	border: 1px dashed #999;
	padding: 10px;
}

.graphcontainer .graph {
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
	background: #efefef;
	height: 115px;
	margin-left: auto;
	margin-right: auto;
}

.graphcontainer span {
	width: 20px;
	margin-left: 10px;
	margin-right: 10px;

	font-size: 8;
	text-align: center;
}
</style>
</head>
<body>

<div class="graphcontainer">
	<div class="graph">
			<span style="height: 100%; width: 0px; margin: 0px;">&nbsp;</span>
			<span style="background: green; height: 80%;">&nbsp;</span>
			<span style="background: blue; height: 60%;">&nbsp;</span>
	</div>
	<span>80%</span><span>60%</span>
</div>

</body>
</html>
[/code]

Top
Tags: