Accessibility

CSS Advisor

Problem defining link behavior in class

by BenAllenPhotography on January 24, 2013 Avg Rating 5.0 (1)   |   Log in to rate post.

Tagged with Safari 4 , separate link colors , Explorer 8.0 , css , Color , Firefox 3.5

Problem

I'm using CSS to define link colors, hover etc. and for all my formating instructions nothing is happening

Solution

I'm a bit stumped how to overcome this problem; I thought about maybe looking at an exterior plugin but that seems silly

Detailed description

 First of all, thanks for taking a look, I appreciate the help.

 

I have a MainNavBar I use at the top of my page for navigation and I want the links to be obnoxiously red for testing purposes.  Yet defining them this way has had no effect.

I went as far as removing all other link definitions in the css sheet and made sure there were no definitions on the page itself.

Here's the snippet of code from the style sheet.

 

#MainNavBar {

font-family: Arial, Helvetica, sans-serif;

font-size: large;

font-weight: normal;

margin: 0px;

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

top: 10px;

position: relative;

text-align: right;

padding-right: 24px;

}

a.MainNavBar:link {

color:#FF0000

}

a.MainNavBar:visited {

color:#FF0000 

}

a.MainNavBar:active {

color:#FF000

}

a.MainNavBar:hover {

color:#FF000

}

 

Related files for download


styles1.css




Text ID: PROBLEM_DEFINING_LINK_BEHAVIOR_IN_CLASS



Comments (4)

To add a comment, please Log in.




I think you have to define the height and width of MainNavBar

I think you have to define the height and width of MainNavBar

I meant to say, Try different Selectors...

sorry bout the spelling error!

Try different selectos

First, I did not see your styles for the links on the style sheet you posted.  None the less, I agree with the first comment, the active style must come after the hover style.

Order to specify styles for links: (use lower case!)
a
a:link
a:visited
a:hover
a:active

Try using the following selectors:

#MainNavBar a
#MainNavBar a:link
#MainNavBar a:visited
#MainNavBar a:hover
#MainNavBar a:active

You can group these selectors or some of them, just be sure to separate each selector with a comma.
Be sure to define these styles beneath the existing link styles specified under Element/Tag Selectors.

Do you have a url to the web page?

Problem defining link behavior in class

Try changing the order of the active and hover styles. I believe that if all behaviors are defined for a link, then "hover" style should come before "active."





CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (103)
Mozilla/Firefox (52)
Opera (18)
Safari (38)
CSS Properties
Background (25)
Border (10)
Color (10)
Float (23)
Font (6)
Margin (11)
Padding (9)
Position (40)
Text (30)
Width/Height (27)