there's obviously something wrong here that i am not seeing >.<
code:
<html>
<head>
<title>Moo</title>
<style type="text/css">
a {
color: #666;
text-decoration: underline;
font-weight: normal;
}
#box {
width: 400px;
padding: 15px;
border: 1px #333 solid;
background: #ccc;
margin: 15px;
}
#box h1 {
font-size: 24px;
margin: 5px;
}
#box p {
margin: 5px;
font-size: 14px;
line-height: 1.4;
}
#box p span {
border-bottom: 1px #666 dotted;
}
</style>
<script language="javascript">
function fontsize(px) {
document.getElementById('foo').style.font-size=px;
}
</script>
</head>
<body>
<h3>Font Size: <a href="#" onClick="fontsize('12px')">Small</a> | <a href="#" onClick="fontsize('16px')">Medium</a> | <a href="#" onClick="fontsize('20px')">Large</a></h3>
<div id="box">
<h1>Box 1</h1>
<p>Maecenas dapibus mi non nunc. <span id="foo">Curabitur</span> sed ipsum feugiat tellus ultricies accumsan. Integer pretium, orci sit amet ultricies blandit, augue felis volutpat enim, ut sodales lacus diam et sapien. Phasellus pellentesque. In fringilla ante id magna <span id="foo">commodo</span> dictum. Maecenas dapibus malesuada neque. Morbi tincidunt augue eu ligula. Donec dignissim. Etiam rhoncus. Nam id sapien. Pellentesque auctor venenatis massa. Donec eleifend sodales orci. Mauris non mauris. Quisque non velit.</p>
</div>
<div id="box">
<h1>Box 2</h1>
<p>Etiam in justo. Fusce ut mi at justo aliquet <span id="foo">cursus</span>. Cras orci felis, iaculis nec, placerat vulputate, sollicitudin fermentum, nibh. Nullam accumsan enim et velit. Integer arcu turpis, congue et, fermentum quis, tincidunt sed, ipsum. Proin sagittis varius mi. In mollis placerat mi. Duis ornare sem ut lectus. Donec porttitor sollicitudin neque. Quisque aliquet. Sed ornare. <span id="foo">Nunc</span> varius. Morbi pretium est non lectus.</p>
</div>
</body>
</html>
nothing happens when i click the font size links >.<
