Navigation Sprites Only Working 1st 3 Links

[aspiringWebbie]

Good evening Forum,
As you can tell by my SN – I am an aspiring designer / developer (still in my self taught studies). With that comes some bumps in the road. What I am experiencing currently is an issue with CSS Sprites on my main navigation. The hover state works on the 1st 3 links (Home – Services – About). However – this is where it stops and it does not work on the last 2 links (Faq – Contact). I thought it may have been due to not placing the hover correctly – but the math is ok.

I am waiting for my brother to upload the new version on the server – so I do not currently have a link. I have provided snippets of my code – and if the url is needed – I understand and will reply back once it is up.

Any input you may have is greatly appreciated and thank you in advance –

Brian

Code:

[b]the HTML[/b]

• Home
• Services
• About
• Faq
• Contact

Code:

[b]The CSS[/b]

#navigation {
position: relative;
margin: 0;
padding: 0;
height: 45px;
background:url(../images/nav-sprite.jpg) no-repeat;
/*margin-bottom: 20px;*/
overflow: hidden;
}

#navigation span {
display: none;
}

#navigation li, #navigation a {
display: block;
height: 45px;
}

#navigation li {
float: left;
display: inline;
list-style: none;
}

#home {
width: 115px;
margin-left: 250px;
}

#services {
width: 140px;
}

#about {
width: 120px;
}

#faq {
width: 100px;
}

#contact {
width: 135px;
}

#home a:hover {
background:url(../images/nav-sprite.jpg) -250px -45px no-repeat;
}
#home a.active {
background:url(../images/nav-sprite.jpg) -250px -90px no-repeat;
}

#services a:hover {
background:url(../images/nav-sprite.jpg) -365px -45px no-repeat;
}

#about a:hover {
background:url(../images/nav-sprite.jpg) -505px -45px no-repeat;
}

#faq a:hover {
background:url(../images/nav-sprite.jpg) -625px -45px no-repeat;
}

#contact a:hover {
background:url(../images/nav-sprite.jpg) -725px -45px no-repeat;
}

[TheDoc]

Hey Brian, come back to this post when you have a link ready – it’s the quickest and easiest way for a member to help debug your problem.

[aspiringWebbie]

Hi TheDoc – I know and sorry for that. Mind was changed and decided not to use the Sprite for navigation. Thanks

[Author]

Posts