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 here) I have appear in IE7.

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.

Could you please help me out thank you.

Here is the CSS

'@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);
}`

EDIT

Fixed the problem by adding font-size: 0px; line-height: 0px; to the list-item.

But the background image is not centered and this only effects IE7

After looking through the menu with IE8's compatibility mode and its developer tools, there is an error with text-indent: -3000px; I have no idea what it is, but removing this makes your menu display as intended.