Expression Engine paths/urls affecting CSS sprite navigation in Firefox

Question

I'm currently putting an HTML site into Expression Engine. The site uses the body ID tag to drive the sprite navigation rather than current/active classes. When I created the site index with blank links the navigation appeared correctly. However when I linked the pages to the appropriate templates the sprite positions all defaulted to the last sprite in the navigation's a:link position. When hovered the link would display properly and when clicked take me to the correct place and change to the correct a:focus/hover position. This behavior occurs in Firefox but not Safari. In Safari everything appears how I expected it to. I'm using Expression Engine 2.x on a local installation. I've re-examined the channel urls and the site config settings as well but I've run out of ideas as to what the problem could be. Any thoughts would be appreciated.

This is a visual of the issue I'm having. . The first line is what is how the nav appears in Firefox. The second row is how the link looks when a link is hovered over. The third is how the nav is rendered in Safari.

This is the css for the navigation:

/* navigation */
#nav    {
background: url("/img/nav-bg.gif") no-repeat top left;
position:absolute;
top:176px;
width:960px;
height:44px;
z-index:20;
}

ul#navlist {
position:relative;
height:35px;
width:512px;
padding-left:192px;
margin-top:4px;
overflow:hidden;
}


ul#navlist li   {
padding:0;
margin:0;
float:left;
margin:0px;
text-indent:-9999px;
list-style:none;
}

ul#navlist li a {
display:block;
background-image:url("/img/main-nav-sprite.jpg");
background-repeat:no-repeat;
overflow:hidden;
}

ul#navlist li a:link, #navlist a:visted {
display:block;
}

li#home a {
width:82px;
height:35px;
}

li#services a {
width:101px;
height:35px;
}

li#portfolio a {
width:105px;
height:35px;
}

li#blog a {
width:76px;
height:35px;
}

li#about a {
width:82px;
height:35px;
}

li#contact a {
width:65px;
height:35px;
}

li#home a:link, a:visited   {
background-position:0px 0px;
}

li#home a:hover, a:focus    {
background-position: 0px -35px;
}

li#services a:link, a:visited   {
background-position:-82px 0px;
}

li#services a:hover, a:focus    {
background-position: -82px -35px;
}

li#portfolio a:link, a:visited  {
background-position:-183px 0px;
}

li#portfolio a:hover, a:focus   {
background-position: -183px -35px;
}

li#blog a:link, a:visited   {
background-position:-288px 0px;
}

li#blog a:hover, a:focus    {
background-position: -288px -35px;
}

li#about a:link, a:visited  {
background-position:-364px 0px;
}

li#about a:hover, a:focus   {
background-position: -364px -35px;
}

li#contact a:link, a:visited    {
background-position:-447px 0px;
}

li#contact a:hover, a:focus {
background-position: -447px -35px;
}

/* Main Navigation Active States */
body#home-page ul#navlist li#home a {
background-position:0 -35px;
}

body#services-page ul#navlist li#services a {
background-position:-82px -35px;
}

body#folio-page ul#navlist li#portfolio a   {
background-position:-183px -35px;
}

body#blog-page ul#navlist li#blog a {
background-position:-288px -35px;
}

body#about-page ul#navlist li#about a   {
background-position:-364px -35px;
}

body#contact-page ul#navlist li#contact a   {
background-position:-447px -35px;
}
/* end */

This is my html nav code appended:

    <div id="nav">
    <ul id="navlist">
    <li id="portfolio"><a href="http://localhost:8888/portfolio" title="hue samples">portfolio</a></li>
    <li id="blog"><a href="http://localhost:8888/news" title="learn with us">blog</a></li>
    </ul>
    </div>
    <!-- ***nav -->

I tried using {path="template group/template"} as well but the result was similar.

Answer 1

Looking at your CSS, you're declaring some of the same rules multiple times in your stylesheet. As a result, whatever rules appear later in the stylesheet will override any previous rules matching the same selector.

Therefore, you can greatly simplify your CSS by removing the unnecessary :link, :visited, et al pseudo class selectors which will make debugging your image sprite much easier.

For example, consider the following HTML:

<div id="nav">
    <ul id="navlist">
        <li id="portfolio"><a href="#">portfolio</a></li>
    </ul>
</div>

The relevant CSS can be simplified and consolidated into:

li#portfolio a {
    background-position: -183px 0;
    height: 35px;
    width: 105px;
}

li#portfolio a:hover {
    background-position: -183px -35px;
}

Removing and eliminating the LVHA (LOVE HATE) pseudo classes from your CSS where they're not needed will drastically reduce the complexity debugging your problem.