changing link color amongst nested divs

[WhySoSerious]

im dying here!

i am trying to change the color of two links in a div (in a div, in a div, in a div, etc). for some reason, the color of the text will not change -- every other attribute of the link (padding, border, bg color, etc) works fine. but the actual text color is using the color of the parent div, instead.

any idea what else i can change?

[WhySoSerious]

here is the HTML for that section:

==========
<div class="story_button">
<a href="/counterpoint-the-conduit-doesnt-justify-the-hype/">« Back</a>
</div>

<div class="story_button">
<a href="/point-counterpoint-pros-and-conduits/">Next »</a>
</div>

==========

both of those divs appear within a much larger div, where the link color is a light blue. so, im assuming because they are within that parent div, that is why they are showing that light blue text color.

however, the link color of the two smaller divs above is SUPPOSED to be white, as seen in their CSS, below:

==========

.story_button {
border: 2px #000000 solid;
text-align: center;
margin: 2px;
}
.story_button a{
background-color: #320000;
color: #ffffff;
text-decoration: none;
font-size: 17px;
font-weight: bold;
display: block;
padding: 13px;
}
.story_button a:hover {
background-color: #e10000;
color: #ffffff;
text-decoration: none;
}

==========

(btw, if it helps, this is the page in question: [toonbarn.com...]

[edited by: WhySoSerious at 6:37 pm (utc) on Aug. 16, 2008]

[WhySoSerious]

just tried using the "!important" rule as a quick fix, and that worked. i changed the color code to:
color: #ffffff !important;

at least its working now. but im certain that means something is broken in there somewhere, right?

[csuguy]

That sites got Naruto on it... A+ :D

Anyways - I think the problem is with this line of code:

.story_button a{

It should be:

.story_button a:link{

You don't want to use the important rule as it is only supported by more modern compliant browsers. I think IE ignores it altogether.

Try it out without the important and tell me if it works.

[WhySoSerious]

heya csuguy

unfortunately, even naruto couldn't help me out here :)

i've tried both "a" and "a:link" in the css code, but no dice. as soon as i remove the "! important" tag, the links go back to being blue

[csuguy]

LIES!

Anyways, That most likely means that you have it specified somewhere else in your code with a higher priority. You should check your CSS file(s).

Also - I looked into the !important feature. You can use it - but IE doesn't use it quite correctly. Basically it ignores it and uses whatever comes last. I would personally find the spot where its being defined (which is most likely before where your having to use important) and try to work it out with out the !important feature - however, if it works for you go ahead and use it.

Ryan

[Marshall]

Without knowing the class assigned to the parent <div>, I am going to wing it. Have you tried:

CSS
.parentDiv .story_button a {
definitions
}

where .parentDiv is the class assigned to the outer div.

HTML
<div class="parentDiv">
<div class="story_button">
</div>
</div>

Marshall

[WhySoSerious]

hey guys, thanks for the responses!

well, actually, both of those techniques seem to have worked! the "! important" one and the ".parent .story" one. it still seems like something is a little off, but... y'know what? it works! :) thats good enough for me.

thanks for the help!