Decrease spacing between li anchor elements

I am currently using the following html and css to style my navigation buttons:

CSS

#nav {
      position: absolute;
      top: 42px;
      left: 220px;
      list-style: none;
      height: 84px;
      display: inline;
      overflow: hidden;
      width: 510px;
      }
      
#nav li {
      margin: 0;
      padding: 0;
      display: inline;
      list-style-type: none;
      }
      
#nav a {
      float: left;
      padding: 34px 0 0 0px;
      overflow: hidden;
      height: 0px !important;
      height /**/:34px; /* for IE5/Win */
      }
      
#nav a:hover {
      background-position: 0 -34px;
      }

#nav a:active, #nav a.selected {
      background-position: 0 -34px;
      }
      
#thome a  {
      width: 84px;
      height: 34px;
      background: url(images/home_nav.jpg) top left no-repeat;
      }

#tproducts a  {
      width: 84px;
      height: 34px;
      background: url(images/products_nav.jpg) top left no-repeat;
      }

#tservices a  {
      width: 84px;
      height: 34px;
      background: url(images/services_nav.jpg) top left no-repeat;
      }

#thelpcenter a  {
      width: 84px;
      height: 34px;
      background: url(images/helpcenter_nav.jpg) top left no-repeat;
      }
      
#tabout a  {
      width: 84px;
      height: 34px;
      background: url(images/about_nav.jpg) top left no-repeat;
      }
      
#tcontact a  {
      width: 84px;
      height: 34px;
      background: url(images/contact_nav.jpg) top left no-repeat;
      }



HTML

<ul id="nav">
                  <li id="thome"><a href="http://domain.com/index.php" class="selected">home</a></li>
                  <li id="tproducts"><a href="http://domain.com/products.php">products</a></li>
                  <li id="tservices"><a href="http://domain.com/services.php">services</a></li>
                  <li id="thelpcenter"><a href="http://domain.com/helpcenter.php">help center</a></li>
                  <li id="tabout"><a href="http://domain.com/about.php">about</a></li>
                  <li id="tcontact"><a href="http://domain.com/contact.php">contact</a></li>
            </ul>

My problem is this...I want to bring the individual li anchors closer together. Normally this would be done here...

#nav a {
      float: left;
      padding: 34px 0 0 0px;    <<<<<<<<  last 0px
      overflow: hidden;
      height: 0px !important;
      height /**/:34px; /* for IE5/Win */
      }


increasing the value moves them further apart but entering a -2px makes them disappear. Am I missing something??
LVL 1
guy4graphicsAsked:
Who is Participating?
 
Mark StegglesWeb DeveloperCommented:
Hello,

closer together? you shouldnt have to set a negative padding to make them 'closer together'... the problem must lie somewhere else.

I tested your code and put borders round the anchors and li's, they are already touching... so I dont see how they can be closer together... unless you decrease your set widths on the li's.

I did notice that you havnt cleared the floats... so the li's werent really containing the anchors... try this:

#nav li {
float:left;
border:1px solid #345;
      margin: 0;
      padding: 0;
      display: inline;
      list-style-type: none;
      }
     
#nav a {
      float: left;
      padding: 34px 0 0 0px;
      overflow: hidden;
      height: 0px !important;
      border:1px solid #345;
      height /**/:34px; /* for IE5/Win */
      }
0
 
guy4graphicsAuthor Commented:
I discovered the problem else where. Stupid really...I forgot to readjust the images width when I resized them. Thanks for your input.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.