Opera displaying wrong colour 1

[1DMF]

Anyone know why opera is showing red instead of blue.

I have a CSS file containing the following

a:link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000066;
        text-decoration: none;
}
a:active {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
        text-decoration: none;
}
a:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000066;
        text-decoration: none;
}
a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
        text-decoration: underline;
}

IE, FF, NS all show any hyperlinks on the page correctly in blue(000066) and white when hover. but Opera shows them as red and any visited links as a diferent red.

why is this hapening?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

Your order is messed up. Pseudo classes need to be specified in a correct order to work:
:link
:visited
:focus
:hover
:active
Also, you need not repeat every declaration each time. Just specify the ones that change:

a:link, a:visited {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000066;
    text-decoration: none;
}

a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

a:active {
    text-decoration: none;
}

 

[1DMF]

you what, Opera expects the psuedo class to be in a specific order? , wow - i didn't even know there was a set order for class defenitions.

also i didn't write the CSS it was supplied by our sister company and interestingly enough, they wrote the website with dreamweaver, so I have to assume dreamweaver built the CSS file, which i wouldn't expect dreamweaver to create non-compliant css.

i'll try it and see how i get on, man and i thought FireFox was tetchy - lol

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

i've just tried your CSS and it hasn't worked, still the same problem ?

now what?

here have a look :

http://www.homeloanpartnership.co.uk/M2K-HLP2/hlp.css

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[ChrisHunt]

Opera expects the psuedo class to be in a specific order?

Not Opera especially, but if you want your pseudo-class declarations to work as you (probably) intend, you have to get your order right.

Here's why - CSS is applied to a particular bit of text by looking or the most specific rule(s) that applies to it. If two rules are equally specific, the one specified later takes precedence.

So what happens with your stylesheet if you hover over a visited link? It's both [tt]a:visited[/tt] and [tt]a:hover[/tt] at the same time. [tt]a:visited[/tt] was declared second, so it takes precedence - meaning that visited links don't change colour on hover (which is probably not what you want). There can be similar conflicts between hover and active rules.

Hence the order Vrag suggests, commonly remembered as "LoVe HAte". If you want to throw :focus into the mix, it goes between :visited and :hover. Remember it as "Lord Vader's Former Handle Anakin".

Now, none of this explains why your links are the wrong colour. There's nothing in that CSS fragment that will cause that behaviour. Are you sure there's nothing elsewhere in your HTML or CSS that could be confusing it? What version of Opera are you using? Can you post a URL to the page in question?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[1DMF]

thanks for the Star Wars prep on pseudo class order.

the link to the site is

http://www.homeloanpartnership.co.uk

it will auto direct to the main page.

Opera was downloaded from there site yesterday so is latest version 8.51 Build 7712

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

and another thing, why won't Opera use my outlook client like all the other browsers, when i click a mailto link it askes if i want to register for an email account.

is this some sort of scam?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[ChrisHunt]

I don't have opera installed on my PC, but I have a theory...

Down in the <body> of your page, you have this in one of the <td>s:

<link href="../hlp.css" rel="stylesheet" type="text/css">

If you try to open that CSS file -

http://www.homeloanpartnership.co.uk/hlp.css

- You get an IIS 404 error page, an HTML page with this in the <head>:

<STYLE type="text/css">
  BODY { font: 8pt/12pt verdana }
  H1 { font: 13pt/15pt verdana }
  H2 { font: 8pt/12pt verdana }
  A:link { color: red }
  A:visited { color: maroon }
</STYLE>

Opera is applying the A:link and A:visited styles in preference to your preferred ones, as they're specified later. I guess the other browsers choke either on the <link> being in the <body>, the MIME type of the "CSS" file being wrong, or the fact that it returns a 404 (probably the latter).

Remove that rogue <link> element and you should be home free.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[1DMF]

wow - what on earth is that doing there, i never noticed it, strange place for someone to put the CSS link, especially when there is already this in the head

<link href="hlp.css" rel="stylesheet" type="text/css">

But you were spot on, all the other broswer must have ignored the second css file and used the one specified in the head tag, but opera bombed with the duff second css call.

Took a while to find, it was in the footer include file, but once removed opera is displaying the links correctly.

Just wish it would display iframes correctly and use height:100% the way all other browsers do!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.