CSS Rollovers HELP!

Ok guys im new to this and have a problem i cant work out. Im making a layout and using CSS rollovers. Here is my code:
<style type="text/css">
a {
color:#006;
font-size:8pt;
font-family:helvetica, arial, sans-serif;
text-decoration:underline;
}
a:link {color:#333333; background-color: transparent;}
a:visited {color:#333333; background-color: transparent;}
a:hover {color:#666666; background-color: transparent; text-decoration:none;

a.nav {
color:#000000;
font-size:8pt;
font-family:helvetica, arial, sans-serif;
text-decoration:underline;
}
a.nav:link {color:#FFFFFF; background-color: transparent;}
a.nav:visited {color:#FFFFFF; background-color: transparent;}
a.nav:hover {color:#cccccc; background-color: transparent; text-decoration:none;
</style>

And then this for each link

<td width="19%" align="center">
<a href="/" class="" style="text-decoration: none">Web Hosting</a></td>

This works for me in IE as can be seen here: http://www.element09.com/matt/mooharr/coded/

The two different classes work, the first line of navigation has one class, and the second line has a different class. All good and well in IE. But then in Mozilla, the second line of links revert to the first class.

Has anybody got any idea why this may be?

Thanks for help, its greatly appreciated....

Matt

It's because you've got the CSS wrong. All of the ".nav" declarations should *begin* with ".nav" and be followed by other things, like this:

.nav a
{
color: #000000;
font-size: 8pt;
font-family: helvetica, arial, sans-serif;
text-decoration: underline;
}

Try making that change for the other items (change "a.nav:hover" to ".nav a:hover") and you should be fine!
-ts

Actually, no, he's got it right it's a.class:link... your problem was you didn't close all the styles:

<style type="text/css">
a {
color:#006;
font-size:8pt;
font-family:helvetica, arial, sans-serif;
text-decoration:underline;
}
a:visited {
color:#333333;
background-color: transparent;
}
a:hover {
color:#666666;
background-color: transparent;
text-decoration:none;
}

a.nav {
color:#000000;
font-size:8pt;
font-family:helvetica, arial, sans-serif;
text-decoration:underline;
}
a.nav:link {
color:#FFFFFF;
background-color: transparent;
}
a.nav:visited {
color:#FFFFFF;
background-color: transparent;
}
a.nav:hover {
color:#cccccc;
background-color: transparent;
text-decoration:none;
}
</style>


You didn't close a:hover and a.nav:hover:)

http://css.maxdesign.com.au/listutorial/roll_master.htm
??

Take a look at the way they write " #navcontainer a:hover." Am I getting it wrong? I thought it would be ".nav a:hover"...

I don't have any of my own CSS to check out.
-ts

You can do it both ways, that's all, I should have explained it better, sorry:)

you can do .nav a:hover -- which is saying 'in the class nav the link will hover like...'

or you can do a.nav:hover -- which is saying 'the link inside the nav class will hover like...'

Same thang, just a different way of saying it. You can do that with an id too like #nav a:hover or a#nav:hover

Didn't know that! Is there a preferred way?
-ts

Oh, welcome to the forums, mdempsey! This is a great place to get some help and to help others. Glad you joined!
-ts

Didn't know that! Is there a preferred way?
-ts

Way 1:

.nav a {}
<div class="nav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>


Way 2:

a.nav {}
<div>
<a class="nav" href="#">Link</a>
<a class="nav" href="#">Link</a>
<a class="nav" href="#">Link</a>
<a class="nav" href="#">Link</a>
<a class="nav" href="#">Link</a>
</div>


The first way is both neater and smaller. Naviation links should be marked up as <ul>s really, but in this example i didnt feel lik typing them all out.

Thanks guys, you all rock. In the end i used 'bradyj's' method, but im sure they all would have worked. This was a great fast response from you coders and a great welcome. I will continue to come here in the future, expect a lot more problems from me!

Thanks again,

Matt