homepage Welcome to WebmasterWorld Guest from 54.226.168.96
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
CSS links in Firefox
Rahh




msg:3323440
 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




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)

MUST come after

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

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved