Welcome to WebmasterWorld Guest from 54.234.244.30

Forum Moderators: not2easy

Message Too Old, No Replies

CSS links in Firefox

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

New User

5+ Year Member

joined:Feb 5, 2007
posts:16
votes: 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:

<style type="text/css">
A.LO:link {text-decoration: none; font-weight: normal; color: "#444141"}
A.LO:visited {text-decoration: none; font-weight: normal; color: "#444141"}
A.LO:active {text-decoration: none; font-weight: normal; color: #990033;}
A.LO:hover {text-decoration: none; font-weight: normal; color: #009bd9;}
</style>

Hope some one can help.

Thanks!

6:37 am on Apr 27, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


You don’t need to quote colours in CSS. If you remove them from your initial two statements the problem should resolve itself.
11:01 pm on Apr 29, 2007 (gmt 0)

New User

5+ Year Member

joined:Feb 5, 2007
posts:16
votes: 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.

11:07 pm on Apr 29, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 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.
11:28 pm on Apr 29, 2007 (gmt 0)

New User

5+ Year Member

joined:Feb 5, 2007
posts:16
votes: 0


Ok thanks. It must be something in the html then. I will keep playing with it.

Thank you.

4:07 am on Apr 30, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Mar 18, 2007
posts:671
votes: 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]

4:35 am on Apr 30, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 20, 2004
posts:87
votes: 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!

5:48 am on Apr 30, 2007 (gmt 0)

New User

5+ Year Member

joined:Feb 5, 2007
posts:16
votes: 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

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

Moderator

WebmasterWorld Administrator buckworks is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 9, 2001
posts:5612
votes: 22


MUST come after

A handy mnemonic for remembering the order is

LoVe HAte

link ~ visited ~ hover ~ active

9:53 pm on May 1, 2007 (gmt 0)

New User

5+ Year Member

joined:Feb 5, 2007
posts:16
votes: 0


I my last post I had them the right way.

I have come to the conclusion that 'Link' doesn’t work in FireFox.

10:24 pm on May 1, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 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

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members