I am currently building a small website for a client, and am trying to get this jQuery navigation to display properly in IE7.

Here is a link to the site
http://www.freshbeat.co.uk/concept/a...co.uk/website/
Notice how the nav works properly in FF, the tab that is being hovered is supposed to 'pop' out above the other list items (except for the 'active' one). Well in fact, it's the '<span>' element that is supposed to jump to the front, as that is what jQuery deals with when one of the '<a>' elements is hovered over.

But this just doesn't happen in IE!

I presume the problems lies somewhere in here:

CSS:

#nav {
    position:absolute;
    bottom:0;
    right:10px;
    border-bottom:#d01f60 solid 1px;
    width:475px; }

#nav li {
    display:inline; }

#nav a {
    background:url(../image/navLi.png) no-repeat left center;
    float:left;
    width:100px;
    height:15px;
    padding:11px 20px 4px 0;
    margin-left:-25px;
    color:#d01f60;
    text-align:right;
    text-decoration:none;
    font-size:90%;
    position:relative; }
    
ul#nav li a span {
    background:url(../image/navLiHover.png) no-repeat left top;
    display:block;
    position:absolute;
    top:0;
    left:0;
    padding:11px 30px 0 0;
    height:100%;
    width:100px;
    z-index:90;
}

#nav a.active {
    background-image:url(../image/navLiHover.png);
    z-index:99;
}

HTML for ul#nav

<ul id="nav">
        <li><a href="./">home<span>home</span></a></li>
        <li><a href="../about.htm">about us<span>about us</span></a></li>
        <li><a href="../gallery.htm">gallery<span>gallery</span></a></li>
        <li><a href="../clients.htm">clients<span>clients</span></a></li>
        <li><a href="../contact.htm">contact us<span>contact us</span></a></li>
      </ul>

Aswell as that, IE seems to put a horrible thin black edge on the top of the <span> background, if anyone also knows how to fix that then it would be great!

I don't see the hover rules in, but IE only supports them on the a element. See if changing the jQuery rule to do the rollover on a keeps IE from coughing up furballs. I personally use the Superfish menu (also uses jQuery) and it's been the most cross-browser compatible one I've seen yet.

tim

IE7 DOES support the hover pseudo-class on elements other than the <a> tag.

The problem may have more to do with the absolute positioning and IEs weird 'stacking order" problems. Apparently it was not fixed in IE7. You might want to read this:
http://www.vancelucas.com/blog/fixin...s-with-jquery/