Jesus, what a mess. You don't have to use position: fixed; and z-index for stuff inside the bottom bar. Having the bar set will automatically take care of all content.
Exactly what result are you trying to get? You had a div labelled "serverjoin" which had no content at all, and text saying "Join Server" inside another div. I'd suggest just having one link that says "Join Chat". Having a link that says "Chat" and non-linked text that says "Join Server" is a bit confusing. People might be inclined to click on the latter if they aren't familiar with the setup.
As a first guess at what you want, I'd suggest using this for the markup. Using a ul for the main bottom bar container makes more sense than a div. Both are block level elements and behave the same way, but a ul is more suitable for what you want to put inside it (namely a list of links).
// Show the load time?
echo '<span class="smalltext">'. $txt['page_created'], $context['load_time'], $txt['seconds_with'], $context['load_queries'], $txt['queries'], '</span>';
// This is where the ul for the bottom bar is going.
<li id="steamlink"><a href="http://steamcommunity.com/groups/beerheadspub/">Steam Group</a></li>
<li id="joinchat"><a href="steam://friends/joinchat/103582791431124790">Join Chat</a></li>
<a href="http://www.gametracker.com/server_info/220.127.116.11:27015/" target="_blank">
<img src="http://cache.www.gametracker.com/server_info/18.104.22.168:27015/b_350_20_537AA7_000000_FFFFFF_000000.png" border="0" width="350" height="20" alt=""/>
Putting it here in the template makes more sense than putting it in the header. Either will work with the fixed positioning, but I prefer to keep markup in roughly the right order as I find it makes things easier to follow.
For the css, this should be close for a first guess:
background: url(../images/custom/floatbarbg.png) repeat-x;
font-family: 'Allerta Stencil', sans-serif;
It will still need paddings and margins sorted on the li's.