...

View Full Version : firefox not reading css



esthera
12-27-2005, 12:38 PM
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

ronaldb66
12-27-2005, 01:22 PM
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:
.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:
<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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum