django: CSS unordered list indent space to the left and right

Basically I have navigation bar inside my "main" div, and its indented to the left.

enter image description here

I cannot figure out where does this indentation come from, I tried padding/margin 0, padding-left/margin-left 0 but still nothing, It won't move even one inch!

I even tried mozilla firebug inspector to try to find out if I selected it right, basically no solution.

And here is html/css file if someone would have time to take a sneaky-beaky onto HTML code:

body {
  background-color: #000;
  color: white;
}

/* Style for tabs */
#main {
  color: 111;
  width: 600px;
  margin: 8px auto;
}

#main > li, #main > ul > li
{ list-style:none; float:left; }

#main ul a {
  display:block;
  padding:6px 10px;
  text-decoration:none!important;
  margin:1px 1px 1px 0;
  color:#FFF;
  background:#444;
}

#main ul a:hover {
  color:#FFF;
  background:#111;
}

#main ul a.selected {
  margin-bottom:0;
  color:#000;
  background:snow;
  border-bottom:1px solid snow;
  cursor:default;
}

#main div {
  padding:10px 10px 8px 10px;
  *padding-top:3px;
  *margin-top:-15px;
  clear:left;
  background:snow;
  height: 300px ;
}

#main div a {
  color:#000; font-weight:bold;
}
#male, #female, #all, #new {
  color: black;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>2015 Race Finishers</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="my_style.css">
  </head>
  <body>
    <header>
      <h2>2015 Race Finishers</h2>
    </header>
    <div id="main">
      <ul class="idTabs">
        <li><a href="#male">Male Finishers</a></li>
        <li><a href="#female">Female Finishers</a></li>
        <li><a href="#all">All Finishers</a></li>
        <li><a href="#new">Add New Finishers</a></li>
      </ul>
      <div id="male">
        <h4>Male Finishers</h4>
        <ul id="finishers_m"></ul>
      </div>
      <div id="female">
        <h4>Female Finishers</h4>
        <ul id="finishers_f"></ul>
      </div>
      <div id="all">
        <h4>All Finishers</h4>
        <ul id="finishers_all"></ul>
      </div>
      <div id="new">
        <h4>Add New Finisher</h4>
        <form id="addRunner" name="addRunner" action="service.php" method="POST">
          First Name: <input type="text" name="txtFirstName" id="txtFirstName" /> <br>
          Last Name: <input type="text" name="txtLastName" id="txtLastName" /> <br>
          Gender: <select id="ddlGender" name="ddlGender">
          <option value="">--Please Select--</option>
          <option value="f">Female</option>
          <option value="m">Male</option>
          </select><br>
          Finish Time:
          <input type="text" name="txtMinutes" id="txtMinutes" size="10" maxlength="2" />(Minutes)
          <input type="text" name="txtSeconds" id="txtSeconds" size="10" maxlength="2" />(Seconds)
          <br><br>
          <button type="submit" name="btnSave" id="btnSave">Add Runner</button>
          <input type="hidden" name="action" value="addRunner" id="action">
        </form>
      </div>

    </div>
    <footer>
      <h4>Congratulations to all our finishers!</h4>
      <br>Last Updated: <div id="updatedTime"></div>
    </footer>
    <script src="scripts/jquery-1.6.2.min.js"></script>
    <script src="scripts/my_scripts.js"></script>
    <script src="scripts/jquery.idTabs.min.js"></script>
  </body>
</html>

This is just for learning purpose, but I would really love if I could somehow solve this problem, biggest thing is that I have no clue where does it come from.

django

samedi 27 juin 2015

CSS unordered list indent space to the left and right

Aucun commentaire:

Enregistrer un commentaire