title: Background picture being cut off
body: <p><a href="http://mohrdevelopment.com" rel="nofollow">http://mohrdevelopment.com</a></p>
  
  <p>As you can see, i have a problem with my navigation bar. The images are being cut off (stays on line with text), and i can't figure out how to fix it.</p>
  
  <pre><code>            &lt;ul class="navigation"&gt;
              &lt;li class="navbar"&gt;&lt;a href="index.html" class="navbarlink" &gt;&lt;em class="home"/&gt;&lt;b&gt;Home&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="navbar"&gt;&lt;a href="second.html" class="navbarlink"&gt;&lt;em class="photos"/&gt;&lt;b&gt;Photos&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="navbar"&gt;&lt;a href="index.html" class="navbarlink"&gt;&lt;em class="projects"/&gt;&lt;b&gt;Projects&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="navbar"&gt;&lt;a href="index.html" class="navbarlink"&gt;&lt;em class="about"/&gt;&lt;b&gt;About&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="navbar"&gt;&lt;a href="index.html" class="navbarlink"&gt;&lt;em class="contact"/&gt;&lt;b&gt;Contact&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>     .navigation {
          background:#1841c8 url(Navigation/Navigation/nav_background.png);
          height:40px;
          margin-bottom:0px;
          display:block;
      }
  
      .navbar {
          display:inline-block;
          line-height: 40px;
          margin-right:40px;
          }
  
      .navigation .navbar .navbarlink{
          color:#FFFFFF;
          padding: 11px 5px 11px;
      }
  
      .navigation .navbar .navbarlink b{
          padding-left:40px;
          padding-right:5px;
      }
  
      .navigation .navbar .navbarlink:hover{
          color:#00CCFF;
          background: url(Navigation/Navigation/nav_hover.png);
          text-decoration:none;
          padding: 11px 5px 11px;
      }
  
  
  
      /*Navigation bar icons*/
      .navigation .navbar .navbarlink em.home{
          background-image: url(Navigation/Icon_images/home.png);
          background-repeat: no-repeat;
  
      }
  
      .navigation .navbar .navbarlink em.photos{
          background-image: url(Navigation/Icon_images/Photo.png);
          background-repeat: no-repeat;
      }
  
  
      .navigation .navbar .navbarlink em.projects{
          background-image: url(Navigation/Icon_images/projects.png);
          background-repeat: no-repeat;
      }
  
  
      .navigation .navbar .navbarlink em.about{
          background-image: url(Navigation/Icon_images/about.png);
          background-repeat: no-repeat;
      }
  
      .navigation .navbar .navbarlink em.contact{
          background-image: url(Navigation/Icon_images/Contact.png);
          background-repeat: no-repeat;
      }
  </code></pre>
  
  <p>Would be happy if someone would help me troubleshoot it!</p>