Button on top of Header Image

[webiter]

Seeking to install a Link a Friend button on top of a header image. I want to align the button away from the edge of the page about 10px but I am having trouble! Any direction greatly appreciated.

I have the div's set up as follows:

<div id="button"><a href="javascript:popup()" alt="Link a Friend Button"></a></div>
<div id="banner"><img src="album/banner.png" alt="Website Banner Image" width="960px"/></div>

and the controlling css as follows:

<style type="text/css">
#button  {list-style:none;position:absolute;top:10;left:10;} /*free-web-buttons.com*/
#button a{background-image:url(album/link.png);width:160px;height:23px;display:block;color:transparent;} 
#button a:hover{background-position:left bottom;}
</style>

which gives me a result as attached poor_button_position.jpg image: