Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2004
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation 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:
    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

    Code:
     <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

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    .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
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #3
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually, no, he's got it right it's a.class:link... your problem was you didn't close all the styles:
    Code:
    <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
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #4
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #5
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #6
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Didn't know that! Is there a preferred way?
    -ts
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #7
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, welcome to the forums, mdempsey! This is a great place to get some help and to help others. Glad you joined!
    -ts
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tsguitar2004
    Didn't know that! Is there a preferred way?
    -ts
    Way 1:
    Code:
    .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:
    Code:
    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.
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #9
    New Coder
    Join Date
    Oct 2004
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks

    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •