made bullets position correctly

index.html

@@ -13,10 +13,18 @@
 		opacity: 0.5;
 	}
 	.user {
-		-webkit-transition: left 0.5s, top 0.5s;
-		font-size: 20px;
+		-webkit-transition: left 0.5s linear, top 0.5s linear;
 		position: absolute;
 	}
+	.user .bullet {
+		width: 10px;
+		height: 10px;
+		position: absolute;
+		left: -5px;
+		top: -5px;
+		border-radius: 5px;
+		background-color: #f00;
+	}
 	.user .name {
 		border-radius: 2px;
 		font-size: 12px;
@@ -30,11 +38,11 @@
 	var websocket;
 
 	function init() {
-		document.getElementById("myName").innerHTML = myName;
 		if ("WebSocket" in window){
+			document.getElementById("myName").innerHTML = myName;
 			testWebSocket();
 		} else {
-			document.getElementById("status").innerHTML = 'No websockets :(';
+			document.getElementById("status").innerHTML = 'No websockets :(. This means that you either use <em>Internet Explorer</em> or <em>Android</em>. In both cases, I suggest that you use <a href="http://www.google.com/chrome/">Chrome</a> or <a href="http://www.getfirefox.net/">Firefox</a>!';
 		}
 	}
 	function testWebSocket() {
@@ -65,7 +73,7 @@
 				var user = document.createElement('div');
 				user.id = people[i].name;
 				user.className = 'user';
-				user.innerHTML = '&bull; ';
+				user.innerHTML = '<div class="bullet"></div>';
 				user.appendChild(name);
 				user.style.left = people[i].position.x + "px";
 				user.style.top = people[i].position.y + "px";