...

View Full Version : CSS Rollovers HELP!



mdempsey
10-01-2004, 10:24 PM
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

tsguitar2004
10-01-2004, 10:36 PM
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

bradyj
10-01-2004, 10:47 PM
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:)

tsguitar2004
10-02-2004, 12:10 AM
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

bradyj
10-02-2004, 12:21 AM
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

tsguitar2004
10-02-2004, 04:39 AM
Didn't know that! Is there a preferred way?
-ts

tsguitar2004
10-02-2004, 04:41 AM
Oh, welcome to the forums, mdempsey! This is a great place to get some help and to help others. Glad you joined!
-ts

ReadMe.txt
10-02-2004, 12:28 PM
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.

mdempsey
10-02-2004, 01:23 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum