Javascript-форум - один span перекрывает другой, как избежать

Друзья-форумчане, прошу вашей помощи!!!
Необходимо было сделать ссылки которые располагались бы по окружности. Эту задачу мне решить удалось. Но возникла небольшая загвоздка, при нажатии некоторых ссылок, выделяется другая и переход происходит именно по ней, а некоторую нажимаешь.
Я так понял, что дело в перекрытии одного span другим, и нажимается в итоге та ссылка у которой z-index имеет наибольшее значение. Каким образом можно решить возникшую проблему?

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Текст по окружности</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.lettering.js"></script>
		<script type="text/javascript" src="eliptext.js"></script>

		<script type="text/javascript">
			$(document).ready(function () {
			$('#curved2').elipText({radius: 112.5, dir:-1});
			$('#curved').elipText({radius: 112.5, dir:-1});
			$('#curved3').elipText({radius: 112.5, dir:-1});
			$('#curved4').elipText({radius: 112.5, dir:-1});
			});
		</script>		

		<style style="text/css">
* 
					{
					padding: 0;
					margin: 0;
					}
.content
					{
					margin:auto;
					/*text-align:center;*/
					padding: 3px;
					}
span
					{
					font: 16px/1.4 georgia, arial;
					letter-spacing: 0;
					}

#curved2 
				{
				position: absolute;
				left: 60%;
				top:50%;
			    z-index: 10;
				}
				
				
#curved 
				{
				position: absolute;		
				left: 60%;
				top:50%;
				z-index: 9;
				}
				
#curved3 
				{
				position: absolute;
				 left: 60%;
				top:50%;
				z-index: 20;
				}	
				
#curved4 
				{
				position: absolute;
				 left: 60%;
				top:50%;
				z-index: 3;
				}								
		</style>
			
</head>
	 
<body>
	<div class="content">                 
		<a href="http://javascript.ru"><span id="curved2">javascript.ru</span> </a>
        <a href="http://htmlbook.ru"><span id="curved">                                                                                                                                       htmlbook.ru</span> </a>
        <a href="http://site-made.ru"><span id="curved3">                                                                                                                                                                                                                                  site-made.ru</span> </a>
        <a href="http://technologyweb.org"><span id="curved4">                                                                  technologyweb.org</span> </a>
            	</div>
   	
</body>
</html>

Подключаемые библиотеки, вместе с исходным кодом, во вложении.