Forum Moderators: not2easy
Firstly, I know inline styles are bad bad bad, but feel I have to use it in this case.
I found this code on another forum to style one instance of a link. It works fine in IE/Windows but not in Firefox/Safari on a Mac. That is, the link and hover state appear white in IE, but still appear red (the default link style) in Firefox and Safari on the Mac.
Does anyone see anything wrong with it?
<a href="http://www.mylinkhere.com" style="{color:white}; :visited{color:white} :hover{color:white}">Link Text</a>
Also, the css validator doesn't seem to work for inline css, but if one exists that anyone knows of, please let me know.
Thanks and Happy Holidays!
Does anyone see anything wrong with it?<a href="http://www.mylinkhere.com" style="{color:white}; :visited{color:white} :hover{color:white}">Link Text</a>
Yes:
If you want to have some links styled differently than others, you're going to need to use a class on the links itself, or a class or id on the link's container. For example, you could do this:
HTML
<a href="http://www.mylinkhere.com" class="foo">Link Text</a>
CSS
a.foo,
a.foo:visited,
a.foo:hover { color:#fff; }
...or this:
HTML
<ul id="foo">
<li><a href="http://www.mylinkhere.com" class="foo">Link Text</a></li>
<li><a href="http://www.mylinkhere.com" class="foo">Link Text</a></li>
</ul>
CSS
#foo a,
#foo a:visited,
#foo a:hover { color:#fff; }
-b
So, you are saying I cannot have an inline hover period? Darn!
Maybe I can get by with just the off state being white, so should I just use style="color:white" inside my href tag for that?
ie <a href="mylink.com" style="color:white">link</a>
Thanks for your help.
Thanks for the response, but I don't have access to the external style sheets or the head of the document, which is why I opted for inline...So, you are saying I cannot have an inline hover period? Darn!
If you just want to change the colour of your link, with default/hover/visited colours all being the same, then yes, you can simply set:
style="color:white;"
If you want to have a hover/rollover effect where the link changes colour as you move over it, then... with no access to a <style> section... you need to do it the 'old way' with inline events that call a small bit of JavaScript that changes the style/colour of the element:
<a href="#" style="color:#090;" onmouseover="this.style.color='#f00';" onmouseout="this.style.color='#090';">Link Text</a>
The link starts off dark green (#090), changes to red (#f00) as you 'hover'/onmouseover the link and back to green again as you move away/onmouseout.
This will work OK in FF and IE.
