CSS rollover Firefox issue

[khroma]

I'm using background position for a rollover effect on my navigation bar on a website. The code I'm using for the rollover is posted below: (I've shortened it to only have the code for one of the buttons for easy reading)

#main-nav { height: 45px; }
#main-nav dl { margin: 0; padding: 0; }

#main-nav { padding-left: 0px; }

#main-nav { padding-left: 11px; overflow: hidden; }


#main-nav dt { float: left; }

#main-nav dt a {
display: block;
height: 0px !important;
height /**/:45px; /* IE 5/Win hack */
padding: 45px 0 0 0;
overflow: hidden;
background-repeat: no-repeat;
}

#main-nav dt a:hover {
background-position: 0 -46px;
}

#main-nav dt#home,
#main-nav dt#home a { width: 113px; background-image: url(../images/nav/home.jpg); }

The customer wanted the tile to be highlighted when on each particular page so I placed this code on each page:
Again this is only what I did for the homepage so you don't have to look at redundant code.

<style type="text/css">

dt#home,
dt#home a,
{
background-position: 0 -150px;
}
</style>

So what I have is an image with 3 buttons states in it. This is working fine in internet explorer but Firefox does not want to move the background position when on each page with the code above. Any suggestions?

Yes this is my first post here but I am a very active developer and will be involved here a lot in the future and thank you for any help!

[khroma]

BTW you can see the site at: http://www.yourhealingguide.com in case you want to see it in action!

[drhowarddrfine]

Please fix your 10 html errors and 5 css errors first.

[drhowarddrfine]

Remove the comma after the 'a'
<style type="text/css">

dt#home,
dt#home a,
{

[khroma]

Thank you so much for your help! Gotta love missing those small details after staring for hours!