CSS using images to replace horizontal menu links but disappears in IE7

Question

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

Im sorry Kyle but I do not know how to include the link at the top. if you can please check out my website by clicking on the link that I included. — matthew, Mar 22 '11 at 12:05
Exactly what doesn't work in IE7? Does the whole menu not show, or does something go wrong when the menu is in a particular state? — safetycopy, Mar 22 '11 at 12:21
The whole menu does not appear, fixed that problem by adding `ont-size: 0px; line-height: 0px;1 but still have the problem of a none centered background image behind the menu? any help would be much appreciated. — matthew, Mar 22 '11 at 13:44

score 1 · Accepted Answer · answered Mar 22 '11 at 12:19

1

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.

answered Mar 22 '11 at 12:19

Kyle

65,599
28
144
152

1

Thanks Kyle thats narrowed it down alot, I have found out that such a simple style was all that was needed :) `font-size: 0px; line-height: 0px;` one problem down now I have a new... The background behind the menu shifts slightly to the right. And once again is only being displayed incorrectly in IE7 – matthew Mar 22 '11 at 13:33

CSS using images to replace horizontal menu links but disappears in IE7

EDIT

1 Answers1