CSS links in Firefox

Forum Moderators: not2easy

Message Too Old, No Replies

CSS links in Firefox

Rahh

5:43 am on Apr 27, 2007 (gmt 0)

I am working on a web site. In explorer the links look fine but in Firefox the initial colours of the links in my style sheet are not working. They are just defaulting to the colour in the <Body> tag. I need the links to be two different styles. The hover is working but not the initial colour. I use a standard style:

Hope some one can help.

Thanks!

Robin_reala

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

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.

Thanks.

Robin_reala

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

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

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

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

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:

Thanks

buckworks

6:39 am on Apr 30, 2007 (gmt 0)

MUST come after

A handy mnemonic for remembering the order is

LoVe HAte

link ~ visited ~ hover ~ active

Rahh

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

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