Re: making buttons in css

> now the unvisited links are overlaying the visited links

Maybe you've already corrected this, because I don't see a problem. The
visited links have a lighter green background and black text color that turn
white when hovering.

Anyway, you have your pseudo-classes in the wrong order. The correct order of
pseudo-classes is :link, :visited, :focus, :hover, :active. Remember that
cascading style sheets cascade, therefore declarations and pseudo-classes
override prior declarations and pseudo-classes of the same element, class, or
ID. From your style sheet, any of the "visited" links will have no "active"
effect because you have :visited after :active.

It is much easier to give most of the declarations to the "A" element and then
change colors for the pseudo-classes. In your example, the :hover is not
needed because it has the same declarations as :hover.


/* inactive link is olive green w white letters */
.menu a {
display: block;
width: 120px; height: 20px;
padding: 5px;
background: #060;
color: #fff;
font: bold 12px sans-serif;
text-decoration: none;
}

/* visited link is lt green w black letters */
.menu a:visited {
background: #0c3;
color: #000;
}

/* hover link is lt green w white letters */
.menu a:hover {
background: #0c3;
color: #fff;
}


If you have named anchors on the site (<a name="">), you will need to add the
rule given below for the sake of Opera 7, Mozilla, Netscape 6+, and any other
Mac browsers that support dynamic pseudo-classes (:focus, :hover, :active) on
elements other than just links. Otherwise the previously-mentioned browsers
will render the :hover effect on the named anchor. To allow the named anchors
to have the intended properties of it's parent containing element, this is
what I recommended adding to your style sheet to overcome that problem:

a[name]:hover {color: inherit; background: inherit}

http://www.timrivera.com/tests/hover.html


Tim
____________________________________________________________
http://webdesign.meetup.com/     See you at the next meetup!

HTML: hwg-basics mailing list archives, maintained by Webmasters @ IWA