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 2 of 2
  1. #1
    Senior Coder
    Join Date
    May 2004
    Posts
    1,441
    Thanks
    15
    Thanked 0 Times in 0 Posts

    firefox not reading css

    I have the follwoing in css
    .buttons {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bolder;
    color: #ffffff;
    text-decoration: none;
    background-color: #005490;
    border: thin ridge #b5f7f7;
    padding: 3px;
    height: 15px;
    width: 100px;
    }
    .buttonsa {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bolder;
    color: #ffffff;
    text-decoration: none;

    }

    tehn in html
    <div class=buttons><a href=# class=buttonsa>button</a></div>

    the button is showing up but the text is the default purple and not white -- why? it works in i.e. but not firefox

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Link, visited, active

    If I recall correctly, purple is the default color for visited links; why IE wouldn't also show this I couldn't say.

    Anyway: adding selectors for the various pseudo-classes and simplifying the rule for the links by using the decendant selector, try this:

    CSS:
    Code:
    .buttons {
    ... (properties as before)
    }
    
    .buttons a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bolder;
    color: #fff;
    text-decoration: none;
    }
    
    .buttons a:link, .buttons a:visited, .buttons a:active {
    color: #fff;
    }
    and HTML:
    Code:
    <div class="buttons"><a href="#">button</a></div>
    Notice I removed the superfluous "buttonsa" class; instead the selector ".buttons a" (note the space between .buttons and a!) means "select all a elements that are descendant from an element with class 'buttons'", which is exactly what you need.
    I left out the hover pseudo-class; if you want a hover effect, simply add it to the list, or add another style rule. Be aware though that the order link - visited - hover - active must be preserved!
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

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