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.