Robin_reala
msg:3323459 | 6:37 am on Apr 27, 2007 (gmt 0) |
You don’t need to quote colours in CSS. If you remove them from your initial two statements the problem should resolve itself.
|
Rahh
msg:3325685 | 11:01 pm on Apr 29, 2007 (gmt 0) |
Thank you for your help. But now the links are the same colour in all browsers. I need two links to be two different colours. Now I have taken out the colour in the first statement where do I assign the link colours? I have given them two different colours in the html but that is been ignored too. I am also playing with the code below. It works in all browsers but firefox. <style type="text/css">
<!--
.LN { font-family: Verdana, Arial, Helvetica; font-size: 12px; color: #FFFFFF}
.LN:hover {font-family: Verdana, Arial, Helvetica; font-size: 12px; color: #009bd9}
-->
</style> <style type="text/css">
<!--
.LO { font-family: Verdana, Arial, Helvetica; font-size: 12px; color: #444141}
.LO:hover {font-family: Verdana, Arial, Helvetica; font-size: 12px; color: #009bd9}
-->
</style> Thanks.
|
Robin_reala
msg:3325688 | 11:07 pm on Apr 29, 2007 (gmt 0) |
Hang on, sorry, I meant just to remove the quotes, not the colours :) Regarding the second piece of code you post, I see no reason why it wouldn’t work in Firefox.
|
Rahh
msg:3325706 | 11:28 pm on Apr 29, 2007 (gmt 0) |
Ok thanks. It must be something in the html then. I will keep playing with it. Thank you.
|
Xapti
msg:3325849 | 4:07 am on Apr 30, 2007 (gmt 0) |
One note:
a:hover should come after a:link and a:visited in the CSS definition in order to be effective.
a:active should come after a:hover in the CSS definition in order to be effective. And what exactly do you want with your thingy..."But now the links are the same colour in all browsers." - Isn't that what you want? All browsers rendering the same way? Do you mean they ALL ignore the color you specified now? It's unclear.
"I need two links to be two different colours." - What do you mean by this? Do you just mean you want a color for link, and a different color for hovered? because the way it's worded there is very confusing. Also, When styling sheets, if you have somethign like a{example: 5px;}, you don't need to specify a:hover{example:5px} unless it's different. It's a concept called inheritance, which occurs on virtually all elements styles. Lastly, I recommend two things: one: ensure you have a proper DOCTYPE declaration on your pages, including test pages. Two: it's probably best to be using all lowercase for your CSS and HTML. While they are not case-sensitive... XHTML is case sensitive, and if ever or whenever you start coding for it, you should be accustomed to it. It also should make things easier for you considering you won't have to use capslock or shift anymore :). Are you having trouble with your most recently posted code? It seems fine, if there's a problem with it, perhaps show us the broader sense of the page you are creating, still stripped down though of all unnecessary things, though. [edited by: Xapti at 4:29 am (utc) on April 30, 2007]
|
sincraft
msg:3325861 | 4:35 am on Apr 30, 2007 (gmt 0) |
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! Note: a:active MUST come after a:hover in the CSS definition in order to be effective!
|
Rahh
msg:3325896 | 5:48 am on Apr 30, 2007 (gmt 0) |
I need the links in the nav bar to be white and other links in the site to be a dark grey. Therefore I need to two styles in my CSS. When I said "But now the links are the same colour in all browsers." At that stage both the links were white. Yes, they ignored the colors I specified. Class - (LO). Now it is working fine in all browsers but Firefox. The hover, active and visited are all working and are the right colours but 'Link' is not working. I'm using this for my links: <a href="index.html" class="LN"> This is what I have in the CSS: <style type="text/css">
<!--
.LN:Link {color: #FFFFFF}
.LN:visited {color: #FFFFFF}
.LN:hover {color: #009bd9}
.LN:active {color: #990033;}
-->
</style> <style type="text/css">
<!--
.LO:Link {color: #444141}
.LO:visited {color: #444141}
.LO:hover {color: #009bd9}
.LO:active {color: #990033;}
-->
</style> Thanks
|
buckworks
msg:3325914 | 6:39 am on Apr 30, 2007 (gmt 0) |
A handy mnemonic for remembering the order is LoVe HAte link ~ visited ~ hover ~ active
|
Rahh
msg:3327931 | 9:53 pm on May 1, 2007 (gmt 0) |
I my last post I had them the right way. I have come to the conclusion that 'Link' doesn’t work in FireFox.
|
SuzyUK
msg:3327961 | 10:24 pm on May 1, 2007 (gmt 0) |
| I have come to the conclusion that 'Link' doesn’t work in FireFox. |
|
hmmm, I think you have come to the wrong conclusion..
:link itself works fine in FF - there must be something else in your CSS that is overruling :link, perhaps some general a rules that are more specific by ID?
e.g. #somediv a {color: #?} test:
CSS:
body {background: #008;} .LN:link {color: #fff; /* white */}
.LN:visited {color: #fff; /* white */}
.LN:hover {color: #009bd9}
.LN:active {color: #990033;} .LO:link {color: #ff0; /* yellow */}
.LO:visited {color: #ff0; /* yellow */}
.LO:hover {color: #009bd9}
.LO:active {color: #990033;} HTML:
<a href="#no" class="LN">link class LN</a><br />
<a href="#no" class="LO">link class LO</a><br />
|
|
simple example works fine in FF, regardless of Doctype! Must be something else in the CSS we can't see? Suzy
|
|
