3 Replies Latest reply on Sep 19, 2012 4:11 PM by pbsum83

    CSS: Space between UL and DIV

    pbsum83 Level 1

      Hello,

       

      I'm creating a layout in CSS and I am having an issue with an unwanted space appearing between the navigation bar UL and content area DIV.  The space doesn't appear in Dreamweaver, but shows up when I view the site in any browser.  I found discussions in which people had similar issues, but the solutions that worked for them haven't seemed to do the trick for me, so was hoping someone could help me look at my code.  I'm learning as I go, so I apologize if I am missing something obvious.

       

      CSS:

       

      #navigation-bar {

          background:url(images/navigation-bar.png) left top no-repeat;

          width: 869px;

          height: 40px;

          margin-left: auto; margin-right: auto;

          margin-top: 0;

          padding:0;

          }

       

          #navigation-bar span {

          display: none;

          }

       

          #navigation-bar li, #navigation-bar a {

          height:40px;

          display:block;

          }

       

          #navigation-bar li {

          float:left;

          list-style:none;

          display:inline;

          position:relative;

          }

       

          #navigation-bar-home {width: 145px;}

          #navigation-bar-attorneys {width: 145px;}

          #navigation-bar-practice-areas {width: 145px;}

          #navigation-bar-philosophy {width: 145px;}

          #navigation-bar-contact {width: 144px;}

          #navigation-bar-links {width: 145px;}

       

          #navigation-bar-home a:hover {background:url(images/navigation-bar.png) 0px -40px no-repeat;}

          #navigation-bar-attorneys a:hover {background:url(images/navigation-bar.png) -145px -40px no-repeat; }

          #navigation-bar-practice-areas a:hover {background:url(images/navigation-bar.png) -290px -40px no-repeat; }

          #navigation-bar-philosophy a:hover {background:url(images/navigation-bar.png) -435px -40px no-repeat; }

          #navigation-bar-contact a:hover {background:url(images/navigation-bar.png) -580px -40px no-repeat; }

          #navigation-bar-links a:hover {background:url(images/navigation-bar.png) -724px -40px no-repeat; }

       

          #content-home {

          background-color: #ffffff;

          background: url(images/courthouse.png) left top no-repeat;

          width:869px;

          height:565px;

          margin-left: auto;

          margin-right: auto;

          position: relative;

          padding:0;

          }

       

      HTML:

       

       

      <ul id="navigation-bar">

      <li id="navigation-bar-home"><a href="index.html"><span>Home</span></a></li>

      <li id="navigation-bar-attorneys"><a href="attorneys.html"><span>Attorneys</span></a></li>

      <li id="navigation-bar-practice-areas"><a href="practice.html"><span>Practice Areas</span></a></li>

      <li id="navigation-bar-philosophy"><a href="philosophy.html"><span>Philosophy</span></a></li>

      <li id="navigation-bar-contact"><a href="contact.html"><span>Contact</span></a></li>

      <li id="navigation-bar-links"><a href="links.html"><span>Links</span></a></li>

      </ul>

      <div id="content-home"></div>

       

      The space is appearing between the 'navigation bar' UL and the 'content-home' DIV.  I want them to be touching.  The only way I can get them to touch is by adding a 'margin-top: -12px' to #content-home, which I'd like the avoid.  Thanks so much for looking - I really appreciate it!