Click to See Complete Forum and Search --> : transparent bg colurls and links


tefnut
04-16-2006, 10:44 AM
I have a page where there is a bg image, where there is content in the main layer is at 70% opacity.

To make my CSS validate (wc3) all of my links should have background colours but obviously i don't want them to show over the image so I tried setting their opacity to compensate for it, but it doesn't seem to work.
What I get in the links is a flat bg colour which i dont want. This is my code:

filter:alpha(Opacity=70);
background-color:#789095;

Blue Shadow
04-16-2006, 11:42 AM
If I understand you correctly all you want is to give your links a transparent background? In which case all you need to specify is:

background-color: transparent;

Regarding Opacity here are the methods to use oopactiy in various browsers:

All browsers with support for the CSS3 opacity (Mozilla Firefox, Safari) will be happy with the w3c valid coding:
opacity: 0.75;

This is needed for IE:
filter: alpha(opacity=75);

Opera (as far as I'm aware) has no support for opacity.

tefnut
04-16-2006, 12:47 PM
Iv tried that but when I validate it will the W3s CSS validator it still says I need to set a back ground colour for a link, its realizes its transparent. Is there a way round this. Id really like to put the W3C CSS logo on my page

Blue Shadow
04-16-2006, 02:28 PM
Are you sure its not a different link or object? I have used the stated on everything I've done and it has worked fine. Check the line numbers, you might need to specify background-color for the pseudo ':hover', ':visted', etc.

Post a link to your CSS so I can see the validation results myself.

btw: Your code isn't going to validate anyway because the "filter: alpha(opacity=70)" is a proprietry IE only command and as such is NOT in the w3c coding standards.

WebJoel
04-16-2006, 05:57 PM
...btw: Your code isn't going to validate anyway because the "filter: alpha(opacity=70)" is a proprietry IE only command and as such is NOT in the w3c coding standards.
If author's code included this at the top of the page(s),:
<!--[if IE]>
<style type="text/css" media="screen">
filter: alpha(opacity=70)
</style>
<![endif]-->
That way, the 'rule' of alpha(opacity=70) will only be applied to IE, and this exclusionary rule is 'overlooked' by validation because it is invisible to all other browsers... S/he can then add regular opacity commands to feed to other browsers.
Note that there cannot be any spaces in the text "<!--[if IE]>" or "<![endif]-->"
That is, do not write it as "<!-- [if IE] >", or it will probably not work, or at the very least, will then be subject to validation and be found to be in fault(??).

tefnut
04-17-2006, 08:22 AM
background css:

filter:alpha(Opacity=70);
background-color:#789095;

a:link,a:visited,a:active {
color: #FEDE58;
text-decoration: none;
background-color: transparent;

}

Link Css
a:hover {
color: #ffffff;
text-decoration: none;
background-color: transparent;

}

Setting the Bgs as transparent comes up as an error in the validator

Blue Shadow
04-17-2006, 09:03 AM
Mmmm this is interesting.

First I will point out that a 'warning' does not mean there is an error / problem with your code. As such if you upload you code (you cannot get the 'This Validates' message by any other method) and validate it, the validator will present you with the "This document validates as CSS!" but will point out the warning below.

Warnings only signify where problems might occur if the user has certain settings. I.e. the point about requiring a background colour is made so that if you specify black text but don't specify a background and the user has the browser set to white-on-black they will get black text (by your definition) and a black background (via the default broswer style).

Secondly if you validate the code specifying CSS3 as the version (on any of the validation methods) this warning is not produced; but it is on all other version numbers. Maybe this is an error with the validator?

I will no-doubt look into this to find out the cause / problem, but in the mean time if anyone has any ideas please let us know.