Having trouble with styling a page in jquery using CSS, specifically aligning #navgroup to the center of the footer and removing an additional white counter from the slider. Here is my code:
<!doctype html>
<html lang="en>
<head>
<title>Player</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<style>
#navgroup {text-align:center;}
#navgroup div {display:inline-block;}
.containing-element .ui-slider-switch
{
width: 100%;
}
input.ui-slider-input {display: none;}
.slider-shit .ui-btn
{
margin-left: -15px;
margin-top: -15px;
}
.slider-shit .ui-slider
{
width: 100%;
top: 3px;
margin: 0;
opacity: 1;
}
.slider-shit
{
padding: 0 20px;
}
</style>
</head>
<body>
<!--Player for indivdual and playlist songs-->
<div data-role="page" data-add-back-btn="true" id="player">
<div data-role="header" data-position="fixed">
<h1 id="songName">Nothing Playing...</h1>
<a href="#" id="favourite" data-role="button" data-icon="star" data-iconpos="notext" class="ui-btn-right">mark as favourite</a>
</div>
<div data-role="content" style="height: 100%;" id="songPicture">
</div>
<div data-role="footer" data-position="fixed">
<table style="margin-left: 5px; margin-right: 5px;">
<tr>
<td><p id="songCurrentpos">0:00</p></td>
<td width="100%" class="slider-shit"><input type="range" name="slider" id="posSlider" value="0" min="0" max="100" width="100%" data-theme="d" data-highlight="true"/></td>
<td><p id="songDuration">0:00</p></td>
</tr>
</table>
<div id="navgroup">
<div data-role="controlgroup" data-type="horizontal">
<a data-role="button" data-iconpos="top" data-icon="back" id="previousSong" data-inline="true">Previous</a>
<a data-role="button" data-iconpos="top" data-icon="arrow-r" id="playSong" data-inline="true">Play</a>
<a data-role="button" data-iconpos="top" data-icon="forward" id="nextSong" data-inline="true">Next</a>
<a href="#songOptionsPage" id="songOptionsButton" data-role="button" data-iconpos="top" data-icon="gear" data-iconpos="notext" data-rel="dialog" data-inline="true"> </a>
</div>
</div>
</div>
</div>
</body>