title: CSS using images to replace horizontal menu links but disappears in IE7
body: <p>After a long time of trying things I still not have come any closer, I do not know how to make the menu for this website (found <a href="http://matthewattanasio.com" rel="nofollow">here</a>) I have appear in IE7.</p>
  
  <p>I am using a css image replacement technique to achieve this result, currently I have a html menu with links and am replacing the links with images in css. </p>
  
  <p>Could you please help me out thank you.</p>
  
  <p>Here is the CSS</p>
  
  <pre><code>'@charset "utf-8";
  /* CSS Reset */
  
  /***** main styles ******/
  body {
      background-image:url(images/bg-top.jpg);
      background-position:top center;
      background-repeat:no-repeat;
      background-color:#222121;
  }
  
  hr {
      border : 0;
      height : 2px;
      background: url(images/line.png) 0 0 repeat-x;
      margin : 1em 0;     
  }
  
  p, h1, h2, h3, li {
      font-family:Arial, Helvetica, sans-serif;
      color:#b1b0b0;  
  }
  
  h2 {
      margin-bottom:40px; 
  }
  
  h3 {
      margin-top:30px;
      margin-bottom:20px;
      font-size:138.5%;
      color:#fafafa;
      text-transform:uppercase;
  }
  
  .body_text {
      line-height:1.6em;
      font-family: 'Arial Narrow', sans-serif;
      font-size:114%; 
  }
  
  input {
      display:block;
      border-top:2px solid #171717;
      border-left:2px solid #171717;
      border-right:2px solid #999;
      border-bottom:2px solid #999;
      background-color:#333;  
      width:200px;
      margin-top:7px;
      margin-bottom:10px;
  }
  
  textarea {
      display:block;
      border-top:2px solid #171717;
      border-left:2px solid #171717;
      border-right:2px solid #999;
      border-bottom:2px solid #999;
      background-color:#333;
      width:300px;
      height:120px;   
      margin-top:7px;
      color:#CCC;
  }
  
  label {
      color:#b1b0b0;
  
  }
  
  #submit {
      width:100px;
      border-top:2px solid #171717;
      border-left:2px solid #171717;
      border-right:2px solid #171717;
      border-bottom:2px solid #171717;
      color:#FFF; 
  }
  
  /*** header styles ********/
  #header_container {
      margin:30px auto 0px auto;
      width:860px;
      height:110px;
      background-image:url(images/line.png);
      background-repeat:repeat-x;
      background-position:0px 88px;
  }
  
  #menu {
      position:relative;
      left:527px;
      top:-8px;   
  }
  
  #menu li {
      display:inline;
      margin-right:20px;
  }
  
  #menu li.last {
      display:inline;
      margin-right:0px;
  
  }
  
  .menu_link1:link, .menu_link1:visited {
      display:inline-block;
      text-indent:-3000px;
      width:45px;
      height:16px;
      background-image:url(images/home.png);  
  }
  
  .menu_link1:active, .menu_link1:hover {
      background-image:url(images/home_highlight.png);
  }
  
  .menu_link2:link, .menu_link2:visited {
      display:inline-block;
      text-indent:-3000px;
      width:92px;
      height:16px;
      background-image:url(images/portfolio.png); 
  }
  
  .menu_link2:hover, .menu_link2:active {
      background-image:url(images/portfolio_highlight.png);   
  }
  
  .menu_link3:link, .menu_link3:visited {
      display:inline-block;
      text-indent:-3000px;
      width:45px;
      height:16px;
      background-image:url(images/blog.png);  
  }
  
  .menu_link3:hover, .menu_link3:active {
      background-image:url(images/blog_highlight.png);    
  }
  
  .menu_link4:link, .menu_link4:visited {
      display:inline-block;
      text-indent:-3000px;
      width:78px;
      height:16px;
      background-image:url(images/contact.png);
  }
  
  .menu_link4:active, .menu_link4:hover {
      background-image:url(images/contact_highlight.png);
  }
  
  .active1 {
      display:inline-block;
      text-indent:-3000px;
      width:45px;
      height:16px;
      background-image:url(images/home_highlight.png);
  }
  
  .active2 {
      display:inline-block;
      text-indent:-3000px;
      width:92px;
      height:16px;
      background-image:url(images/portfolio_highlight.png);
  }
  
  .active3 {
      display:inline-block;
      text-indent:-3000px;
      width:45px;
      height:16px;
      background-image:url(images/blog_highlight.png);
  }
  
  .active4 {
      display:inline-block;
      text-indent:-3000px;
      width:78px;
      height:16px;
      background-image:url(images/contact_highlight.png);
  }`
  </code></pre>
  
  <h1>EDIT</h1>
  
  <p>Fixed the problem by adding <code>font-size: 0px;
      line-height: 0px;</code> to the list-item.</p>
  
  <p>But the background image is not centered and this only effects IE7 </p>