[Phlum]

Hi

I'm making a navigation bar entirely out of images. For each clickable image, this syntax is used:

<span class="nav-item"><a href="something.htm"><img src="button.png"></a></span>

along with an extra divider image in between each nav image.

I have five of these - however, only four of them work properly. The first does not work at all - I can't click it and it doesn't have a rollover. But I can't see anything wrong with it.

The full HTML for the navigation bar is as follows:

<nav id="navigation">
	<span class="nav-item"><a href="#"><img src="Home-button.png"></a></span>
	<img src="navdiv.png">
	<span class="nav-item"><a href="#"><img src="Blog-button.png"></a></span>
	<img src="navdiv.png">
	<span class="nav-item"><a href="#"><img src="Foo-button.png"></a></span>
	<img src="navdiv.png">
	<span class="nav-item"><a href="#"><img src="Bar-button.png"></a></span>
	<img src="navdiv.png">
	<span class="nav-item"><a href="#"><img src="Contact-button.png"></a></span>
</nav>

And the CSS to make the rollovers work is as follows:

nav a img:hover {
	background-color: #333;
	}

Can anybody see what I'm doing wrong, if anything?

Cheers
-phlum

Edit: I removed the Home button, therefore making the first button "Blog" - but it didn't make any difference. I also tried putting in a divider image before it, with no joy... The issue seems to be with the first button in the bar and not specifically Home.

[Ent]

These may be completely unrelated to your question, but...
I'm not quite sure why you're putting those <span> tags around them since you're not doing anything. Why not just set class="nav-item" to the <a> tags?
What do you mean by you can't click it; if the link doesn't go anywhere what would you expect to happen?

[Phlum]

Usually with href="#" it goes to the top of the page. It won't work with this button - not even changing where it leads. The rest work as they should - the background changes when they're rolled over, the link works, etc.

I've done as you said with the <span>s and it looks a lot cleaner now. Thanks

[Ravenswd]

I created a bare page with nothing on it but the code you provided, and it worked fine. My only guess is that there must be something else on the page that's somehow interfering with it. You might want to make a copy of the page and strip out other elements one at a time until it starts working. Also, if you could (privately) link me to the actual page I could take a closer look.

[Ent]

Ravenswd, thank you for trying to help on Tech Support Guy.
In general we prefer for help to remain on the forums. Unless there is an exceptionally good reason for it, private discussions are avoided because a) they rule out the possibility that someone else can help find the solution and b) they don't leave a trail of instructions on the site to assist others with the same problem.

There is, however, nothing wrong with linking to a broken site publicly or pasting the whole of the HTML into the thread.

[Phlum]

I found the issue: the header image is quite large since it has a shadow, and it was covering up the home button. Silly me...