Stick to left

[Lagon666]

Hi

How can i stick tabs to left. Now it has 40px distance to left.

<style>
#Content {
			background-color: #fafafa;
			border: 1px solid #a2b6cb;
			padding: 10px;
			margin-top: -13px;
		}
		
UL#Tabs {
			font-family: Verdana, Arial;
			font-size: 12px;
			font-weight: bold;
			list-style-type: none;
			padding-bottom: 28px;
			border-bottom: 1px solid #a2b6cb;
			margin-bottom: 12px;
			z-index: 1;
		}
		#Tabs LI.Tab {
			float: left;
			height: 25px;
			background-color: #deedfb;
			margin: 2px 0px 0px 5px;
			border: 1px solid #a2b6cb;
		}
		#Tabs LI.Tab A {
			float: left;
			display: block;
			color: #666666;
			text-decoration: none;
			padding: 5px;
		}
		#Tabs LI.Tab A:hover {
			background-color: #bfe0fe;
			border-bottom: 1px solid #bfe0fe;
		}
		/* Selected Tab */
		#Tabs LI.SelectedTab {
			float: left;
			height: 25px;
			background-color: #fafafa;
			margin: 2px 0px 0px 5px;
			border-top: 1px solid #a2b6cb;
			border-right: 1px solid #a2b6cb;
			border-bottom: 1px solid #fafafa;
			border-left: 1px solid #a2b6cb;
		}
		#Tabs LI.SelectedTab A {
			float: left;
			display: block;
			color: #666666;
			text-decoration: none;
			padding: 5px;
			cursor: default;
		}
</style>

<script type="text/javascript">
		// Index Page
		function index() {
			// Tab
			document.getElementById('IndexTab').className = 'SelectedTab';
			document.getElementById('InstallTab').className = 'Tab';
			document.getElementById('UpgradeTab').className = 'Tab';
			document.getElementById('UsageTab').className = 'Tab';
			// Page
			document.getElementById('Index').style.display= 'block';
			document.getElementById('IndexTab').className = 'SelectedTab';
			document.getElementById('Install').style.display = 'none';
			document.getElementById('Upgrade').style.display = 'none';
			document.getElementById('Usage').style.display = 'none';
		}
		// Installation Page
		function install() {
			// Tab
			document.getElementById('IndexTab').className = 'Tab';
			document.getElementById('InstallTab').className = 'SelectedTab';
			document.getElementById('UpgradeTab').className = 'Tab';
			document.getElementById('UsageTab').className = 'Tab';
			// Page
			document.getElementById('Index').style.display= 'none';
			document.getElementById('Install').style.display = 'block';
			document.getElementById('Upgrade').style.display = 'none';
			document.getElementById('Usage').style.display = 'none';
		}
		// Upgrade Page
		function upgrade() {
			// Tab
			document.getElementById('IndexTab').className = 'Tab';
			document.getElementById('InstallTab').className = 'Tab';
			document.getElementById('UpgradeTab').className = 'SelectedTab';
			document.getElementById('UpgradeTab').href = 'Tab';
			document.getElementById('UsageTab').className = 'Tab';
			// Page
			document.getElementById('Index').style.display= 'none';
			document.getElementById('Install').style.display = 'none';
			document.getElementById('Upgrade').style.display = 'block';
			document.getElementById('Usage').style.display = 'none';
		}
		// Usage Page
		function usage() {
			// Tab
			document.getElementById('IndexTab').className = 'Tab';
			document.getElementById('InstallTab').className = 'Tab';
			document.getElementById('UpgradeTab').className = 'Tab';
			document.getElementById('UsageTab').className = 'SelectedTab';
			// Page
			document.getElementById('Index').style.display= 'none';		
			document.getElementById('Install').style.display = 'none';
			document.getElementById('Upgrade').style.display = 'none';
			document.getElementById('Usage').style.display = 'block';
		}
</script>

<ul id="Tabs">
		<li id="UsageTab" class="Tab"><a href="#Usage" onclick="usage(); return false;" title="Usage Instructions">Usage</a></li>
		<li id="UpgradeTab" class="Tab"><a href="#Upgrade" onclick="upgrade(); return false;" title="Upgrade Instructions">Upgrade</a></li>
		<li id="InstallTab" class="Tab"><a href="#Installation" onclick="install(); return false;" title="Installation Instructions">Installation</a></li>
		<li id="IndexTab" class="SelectedTab"><a href="#Index" onclick="index(); return false;" title="Index Instructions">Index</a></li>

</ul>

<div id="Content">
	<!-- Index -->
	<div id="Index">
		INDEX
	</div>

	<!-- Installation Instructions -->
	<div id="Install" style="display: none;">
		INSTALL
	</div>

	<!-- Upgrade Instructions -->	
	<div id="Upgrade" style="display: none;">
		UPGRADE
	</div>

	<!-- Usage Instructions -->	
	<div id="Usage" style="display: none;">
		USAGE
	</div>
</div>

[ryachza]

Add 'padding-left: 0;' to the UL#Tabs declaration. You set padding-bottom, but never zeroed out the left.

A recommendation for the future: try setting all margins/padding to 0 and build from there, rather than trying to debug default browser behavior.