CSS hyperlink problems in Firefox but not IE / Chrome

Heya guys,

I'm new to CSS and am experiencing problems in firefox with my website, but not in IE or Chrome - I believe it's a CSS issue.

Basically I am using CSS image replacement in my navigation and the hyperlinks don't work in Firefox -

my html is link looks like:
<ul id="nav">
<a href="index.html"><li id="nav1"><span>The Musicians Guide</span></li></a>
<a href="the-music-guides.html"><li id="nav2"></li></a>
<a href="blog"><li id="nav3"></li></a>
<a href="musician-resources.html"><li id="nav4"></li></a>
<a href="getinvolved.html"><li id="nav5"></li></a>
<a href="contact.html"><li id="nav6"></li></a>
</ul>

My CSS for this section is:
ul#nav {
position : absolute;

top : 164px;
padding-left : 105px;
overflow : hidden;
}
#nav1 {
padding:0px 0 0 0;
font-weight : 900;
overflow: hidden;
background-image: url("images/the-musicians-guide.jpg");
width: 70px;
background-repeat: no-repeat;
height: 20px;
}


The URL is http://www.themusiciansguide.co.uk
CSS URL is http://www.themusiciansguide.co.uk/style.css

Any suggestions to why the links aren't working in firefox??

Thanks

 

Your HTML is nested incorrectly. You should not have a block element nested in an inline element. <a> = inline, <li> = block.
Change the format of your nav links like so:
change:
<a href="index.html"><li id="nav1"><span>The Musicians Guide</span></li></a>
to"
<li id="nav1"><a href="index.html"><span>The Musicians Guide</span></a></li>