Question

The website I’m working on has a menu that includes a logo image as a background for the last link. For some reason that image doesn’t appear in IE, even though it shows up fine in all other browsers.

Here’s the site:

http://www.cybart.com/bscg/

I would appreciate it if someone could take a look at my CSS and suggest the Internet Explorer version:

 #access {
    left:70%;
    top:140px;
    margin-left:-600px;
        width: 280px;
    z-index:999;
    position:relative;
    float:left;"
    }

#access ul {
-moz-box-shadow: 0 0 5px -1px #888;
-webkit-box-shadow: 0 0 5px -1px #888;
box-shadow: 0 0 5px -1px #888;
}

#access ul,
#access ul ul {
list-style-type:none;
width: 250px;
}

#access ul ul {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
display:none;
}


#access ul li:hover > ul {
    display: block;
}


#access ul li:last-child {
height:77px;
background: url(images/aba/ABALinkRed.jpg) no-repeat top left;
text-indent: -3000px;
-moz-box-shadow: 0 0 5px -1px #888;
-webkit-box-shadow: 0 0 5px -1px #888;
box-shadow: 0 0 5px -1px #888;
}

#access ul li:last-child a {
background:transparent;
height:77px;
}

#access ul ul li:last-child {
background:transparent;
height:32px;
text-indent: 0px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

#access ul ul li:last-child a {
background:#fff;
background: rgba(255, 255, 255, 0.85);
height:18px;
}


#access ul a,
#access ul ul a {
display:block;
padding: 7px 0 7px 10px;
background:#fff;
background: rgba(255, 255, 255, 0.85);
text-decoration:none;
color:black;

} 


#access ul ul {
padding-left:40px;
margin-left:-20px;
}

#access ul ul a {
margin-left: -20px;
padding-left:20px;
width:230px;
}


#access ul a:hover,
#access ul ul a:hover {
color: #CA0000;
}

#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #CA0000;
}

Answer 1

It works in IE9, so I assume you’re using IE8.

This is how you’re adding the image:

#access ul li:last-child {
    background: url(images/aba/ABALinkRed.jpg) no-repeat top left;
}

The reason it doesn’t work is that :last-child is not supported in IE until version 9, see: http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx#pseudoclasses