Simple Navigation Not Working

[thanhtan]

Hi, I have a simple rollover navigation, which is as follows::

Code:

 

<ul id="nav"> <li><a href="about.html" class="about"></a></li>

<li><a href="guestpics.html" class="guestPics"></a></li>

<li><a href="staff.html" class="staff"></a></li>

<li><a href="webcams.html" class="webcams"></a></li>

<li><a href="parties.html" class="parties"></a></li>

<li><a href="contact.html" class="contact"></a></li>

</ul>

 

Here is the CSS for the about link::

Code:

 

#nav a.about{ background-image:url(images/nav/about_off.gif); width:77px; height:18px; }

#nav a.about:hover { background-image:url(images/nav/about_on.gif);}

 

 

I don't see what I am doing wrong? Can someone help?

 

thanks

[TCH-Bruce]

Welcome to the forums thantan

 

A link would be nice but if you add the full url to the image it will probably work.

 

>#nav a.about{ background-image:url(http://you-domain/images/nav/about_off.gif); width:77px; height: 18px;}
#nav a.about:hover { background-image:url(http://you-domain/images/nav/about_on.gif);}

[btrfld]

You might also need to specify the links as block

 

>#nav a.about{ background-image:url(http://you-domain/images/nav/about_off.gif); width:77px; height: 18px; display:block;}
#nav a.about:hover { background-image:url(http://you-domain/images/nav/about_on.gif);}

[TCH-Thomas]

Welcome to the forum, thanhtan.

[carbonize]

Yes you don't really say what the problem is. One problem I have found with using CSS for image rollovers is that the browser seems to download the image each time and so you get an obvious delay unless you include the picture somewhere else on the page but say with dimensions of 1x1.

[Suzanne]

thanhtan which browser are you using to view your site.. your code seems to be fine.. there is difference between browsers visibility.

[TCH-Thomas]

Welcome to the forum, Suzanne.

[TCH-Bruce]

Welcome to the forums Suzanne