Take the 2-minute tour ×

so I have this code:

<a id="baby" href="#" style="display:inline-block;color:#373529;">
<div id="yea" class="like-num">Yeaaaaaaa</div>

with css

a {
 color: #1a5790; 

a * {
 color: #1a5790; 




so the link color in this link is supposed to be blackish even though default link css is blue. And it works, the link color did become blackish.

But then I call a jquery ajax call that on success it would replace #yea with the returned data, so


But then when the data replace is completed, the link color turns back into blue even though before it was black, and this only happens in firefox, not in ie or chrome

does anyone know how I can modify the code so that link color stays black even after the data is replaced:

Thanks in advance!

There is no spoon

-The Matrix

share|improve this question
aaaand the data is? –  Hamish Dec 2 '10 at 17:47
<div> is not an inline element, so I believe is illegal inside an anchor <a>, use a <span>. –  Orbling Dec 2 '10 at 17:49
data is just plain text...no tags or markups or anything –  kamikaze_pilot Dec 2 '10 at 17:53
add comment

3 Answers

up vote 1 down vote accepted

You cannot have a block element (div) inside an inside element (span). This is invalid HTML.

You can however change div to span and provide the span with style display: block to show it as a block element. This is valid.

Even better: you can add display: block to the a itself as well. When you do that, you don't need the extra element inside the a, and this will probably solve your problem.

share|improve this answer
add comment

It's probably the a * CSS declaration. If your return data contains elements (for example a span), it will pick up that CSS (color #1a5790) and not the one in the <a>.

share|improve this answer
yea but it works in the beginning before the html replace....also even when I remove the a *, when the a css is still there, it still does the same thing –  kamikaze_pilot Dec 2 '10 at 17:54
@kamikaze_pilot: it's because the like-num overrides the a *. Try removing the a *, or adding a like-num *. –  cambraca Dec 2 '10 at 17:55
@kamikaze_pilot: hmm can you give us the link so we can see it happen? –  cambraca Dec 2 '10 at 17:55
add comment

Replace all your "a" and "a.*" css with a, a:visited { color: #1A5790; } and see if it still does it.

Edit: Just noticed the div tag is actually inside the a tag. That would be invalid HTML (block-level element inside of an inline-element). Try replacing <div> with <span> and see if that helps.

share|improve this answer
lol I can't replace it with span since in my original code I'm also adding height, width, etc....a:visited doesn't seem to work –  kamikaze_pilot Dec 2 '10 at 17:56
You can replace it with span. Just apply display: block; to the span and it will act like a div. –  simshaun Dec 2 '10 at 17:58
add comment

Your Answer


