0

I am creating a code for I website I use. There are multiple different areas for link color, and they seem to overlap and I am unsure how to fix it.

My HTML is

<div class="floatbox" style="width:200px;height:200px;padding:5px;font-size:15px;position:fixed;left:2px;bottom:10px;overflow:auto;font-color:#3c5eb2;">
</div>

Within this I have links. My CSS is

#floatbox a:link, a:visited, #a:active{color: #BF00FF;}
#floatbox a:hover {color: #BF00FF;text-decoration: underline;}

I have tried using the "!important" tag and nothing is working. If the tag isn't there, all links on the page stay white. If I add the "!important" tag, half the website's links turn purple. I am a beginner coder and I may not be targeting the class properly.

Any help is appreciated!

Fiddle

Improve this question
6
  • 1
    On a side note, having looked at your fiddle, you need to drag your HTML out of the 1990's. There are way too many ables there. The only table that should be there is the pride overview. Look up definition lists div based layout anf if you want to use HTML5 sections. It may seem painful now, but you will thank me later, particularly if you want to do simple layout tweaks. Much easier with tableless layouts. Commented Apr 14, 2014 at 1:18
  • Tell the owners/coders for the site... I know it's painful, the whole table-based-website deal is extremely outdated. Trust me, I know. It annoys the crap out of me lol. Commented Apr 14, 2014 at 1:28
  • Where is #floatbox defined I can't find it in your fidde? Commented Apr 14, 2014 at 1:39
  • It is right below the #white elements. Commented Apr 14, 2014 at 1:48
  • Ahhh found it in your CSS. The CSS in your fiddle has .floatbox your question referecnes #floatbox you might want to edit your question to fix that. If you can't due to not enough rep, let me know if you want me to. Commented Apr 14, 2014 at 2:04

2 Answers 2

Reset to default
1

If this is your actual code, there are a couple of (simple) things that are inconsistent with what you're trying to achieve:

1) you define #floatbox: this is a CSS selector targetting a specific ID equal to "floatbox", whereas you want to target a class. The correct syntax for targetting a class is to prefix the name with "." so you want ".floatbox" in your CSS file

2) you have what looks like a small typo in the first line of CSS: "#a:active" should read "a:active"

w3C schools has a straightforward explanation of simple selectors:

http://www.w3schools.com/css/css_selectors.asp

the :link, :visited etc. pseudo selectors are also sensitive to the order they're declared, again explained here:

http://www.w3schools.com/css/css_pseudo_classes.asp

I can never remember the order myself :)

ETA: Looking at your fiddle, the issue is that you have an ID - "#white" - that encloses the div with "floatbox" class. ID styles take precedence over class styles, even when applied very specifically here. I'd say the easiest thing is to change the "#white" id based style for a ".white" class based style, then you should see precedence applied as you'd like it.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I attempted all of these things [both were just stupid typos haha] and it still doesn't help. It would be easier to show my entire CSS to explain why the overlap is affecting the code. Nothing ever shows up on a validater though..
Without seeing the actual css / html it's difficult to know what it might be - it does't take much to throw everything out. The alternative is to separate mininal html / css to a separate file in isolation and see if you achieve the affect you want. Then you know if the behaviour is the result of a clash.
link There is a Fiddle for the code. The site only allows you to edit certain parts of the code. If I just input my contribution, the link colors work. If the entire code is there, it doesn't.
Looking at your fiddle, the issue is that you have an ID - "#white" - that encloses the div with "floatbox" class. ID styles take precedence over class styles, even when applied very specifically here. I'd say the easiest thing is to change the "#white" id based style for a ".white" class based style, then you should see precedence applied as you'd like it.
@mrsean2k, if you can, edit your answer to include that last comment as an update. It will more than likely get lost in the comments for future users.
|
0

It is important to get to know the tools you need when working with CSS. When you get unexpected behaviour use either Developer Tools in Chrome, or Firebug For Firefox. These tools enable you to inspect an element inplace in a browser and see what CSS rules are affecting them, and just as importantly what rules are being overidden.

You also need to get an understanding of the principles of Cascading and Specificty

Update

You have a class in your html (as it should be) and an ID in the CSS.

Try the Following: 

div.floatbox a:link, 
div.floatbox a:visited, 
div.floatbox #a:active
{
    color: #BF00FF !important; 
}

div.floatbox a:hover {color: #BF00FF !important;text-decoration: underline;}

http://jsfiddle.net/54UQg/4/

OR

Because .floatbox is a child of #white you can use specificity rules to avoid using !important:

#white div.floatbox a:link,
#white div.floatbox a:visited,
#white div.floatbox #a:active
{
    color: #BF00FF;
}

#white div.floatbox a:hover {color: #BF00FF ;text-decoration: underline;}

http://jsfiddle.net/54UQg/5/

Your original issue stemmed from 2 problems, you were targeting an ID with your CSS when it was a class, and secondly, IDs rank higher than classes in the specificity rules.

Improve this answer

1 Comment

I use these at least 100 times a day, this is the only way I would be able to code on the site I use. I saw that "#white" was taking precedence over my additions, but didn't know why. That is why I came to this site.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.