homepage Welcome to WebmasterWorld Guest from 54.145.172.149
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS links in Firefox
Rahh

5+ Year Member



 
Msg#: 3323438 posted 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:

<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!

 

Robin_reala

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3323438 posted 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

5+ Year Member



 
Msg#: 3323438 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3323438 posted 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

5+ Year Member



 
Msg#: 3323438 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3323438 posted 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

10+ Year Member



 
Msg#: 3323438 posted 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+ Year Member



 
Msg#: 3323438 posted 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

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



 
Msg#: 3323438 posted 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

5+ Year Member



 
Msg#: 3323438 posted 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

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



 
Msg#: 3323438 posted 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved