I am trying to put a status indicator in the header of my website. However, I am having a hard time getting it to look neat. I wanted to bring down the green box so that the text was half way between. Make them line up better. I am undecided on exactly how I want to format it really. Right now, I can't do anything without ruining the rest of the header.

n5P65wR.png


I didn't write the markup for the header, so I am having a hard time placing it.

Here is the template that I wrote.

Code:
<style>

#serverOK{
    height: 15px;
    width: 40px;
    display: inline-block;
    background-color: green;
}

#serverDown{
    height: 10px;
   width: 10px;
   display: inline-block;
   background-color: red;
}

#refreshButton{
    width: 28px;
    height: 15;
    background-color: grey;
    background-image: url("");
}

</style>

<script type="text/javascript">

function getData()
{
	var xmlhttp;
	if(window.XMLHttpRequest)
	{
		xmlhttp = new XMLHttpRequest();
	}
	else
	{
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}

	xmlhttp.onreadystatechange=function()
	{
		if(xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			//document.getElementById("status").innerHTML=xmlhttp.responseText; //JSON with server details
			var status = xmlhttp.responseText;
                         if(status == "The Server is offline")
			{
			    document.getElementById("status").innerHTML="<span id='serverDown'>Server Down</span>";
			}
			else
			{
			   document.getElementById("status").innerHTML="<span>Bukkit:</span>&nbsp&nbsp<span id='serverOK'></span>";
			}

		}
	}

	xmlhttp.open("GET","site.com",true);
	xmlhttp.send();
}

</script>
<span style="margin-left:300px;">
    <!--<button id="refreshButton" type="button" onclick="getData()"></button>-->
<span id="status"  style="font-size:9px">Loading Status</span>
</span>

<script>
getData();
window.setInterval(getData,300000);

</script>
Here is the site if you need to see the surrounding markup. Any help is much appreciated.