Hey guys,
I was wondering if there was a way to use valid CSS for transparency filters, without having to use JavaScript. Any clues?
Thanks.The CSS3 specification (<!-- m --><a class="postlink" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#opacity">http://www.w3.org/TR/2003/CR-css3-color ... 4/#opacity</a><!-- m -->) shows that the opacity property does exist, yet the validator considers it invalid; would, currently, all CSS3 be invalid?If you use the advanced css validator (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator-text">http://jigsaw.w3.org/css-validator/validator-text</a><!-- m -->), you will see that it does validate for css3 only.Originally posted by Fang
If you use the advanced css validator (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator-text">http://jigsaw.w3.org/css-validator/validator-text</a><!-- m -->), you will see that it does validate for css3 only.
Thanks. Any clue what to do for IE, or is there no alternative to JavaScript? (If there isn't, I won't use JavaScript anyway.
)I don't see what the big deal is. I use code that causes the validator to puke up errors, but it doesn't concern me because the code isn't really invalid — not my fault if the validator doesn't like it. If worse comes to worse and you have to use some IE-proprietary invalid stuff, oh well; sacrifices must be made.Originally posted by Paul Jr
sacrifices must be made.
Which means IE users just won't have transparency.
Their loss. 
Originally posted by Jona
Which means IE users just won't have transparency. Their loss.
Bingo.div {
opacity: .1;
/* IE */
filter: alpha(opacity=10);
width:100px; /* must have width or height */
/* Moz. */
-moz-opacity: .1;
}
Cascades very buggy in IE and Moz.
Doesn't work for Opera.Originally posted by Fang
div {
opacity: .1;
/* IE */
filter: alpha(opacity=10);
width:100px; /* must have width or height */
/* Moz. */
-moz-opacity: .1;
}
Cascades very buggy in IE and Moz.
Doesn't work for Opera.
lol. Thanks, but I should have been more clear; I knew all three properties, but I didn't know if there was another obtuse way to make it "valid" and at the same time work for IE.So how would I write this so that it would identify which browser is being used?
Also, the IE CSS listed - does it work in IE 6?
What about Safari?
I'd like to try it.Originally posted by ChrisBrown
So how would I write this so that it would identify which browser is being used?
Also, the IE CSS listed - does it work in IE 6?
What about Safari?
I'd like to try it.
Use both, the browser will only translate what it understands. Yes, it will work in IE6; if anything works for Safari it will be opacity. If you'd like to try it, what is holding you back?I'm afraid of trying it.
I'm just an efficiency freak, so I didn't want to waste my time this morning if it wasn't going to work well - but I usually just try stuff and see - I'm just busy this morning....I see. Well, if it's worth working, it's worth trying.Ok, this did the opposite of what I really wanted - i would like the background to be transparent in the DIV. Let me re-phrase - I want to adjust the opacity of the background - sorry.
Is that possible?You can generate it with javascript. Mozilla will interpret the javascript attribute as :
<html>
<body>
<div id="moz" style="background-color:black;width:100px;height:50px;">
</div>
<script>
document.getElementById("moz").style.MozOpacity=.5;
</script>
</body>
</html>What I ended up doing for now is placing two divs on top of each other - #1 is just the background, given an opacity value, and #2 is the actual content.That's the only way it works in Moz. and IE.
In IE this does work:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>opacity</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
.opaque {filter: alpha(opacity=20); -moz-opacity: .2;}
.styling {
width:10%; /* must have width */
padding:5px;
color:#000;
background:#f00;
}
.normal {position:relative;}
-->
</style>
</head>
<body>
<div class="opaque styling"><div class="normal">XXXX</div></div>
</body>
</html>I just use a .png with the desired opacity level and screw IE users untill they get a browser. F*** 'em I say.The problem is I know I have a lot of IE users, so I have to accomidate them.Yeah I used to think that. But now my allowances made for IE are minimal at best, regardless of what the audience may be. They can see a decenet site when either they get a decent browser or MS make one.
My pages have caused quite a few people to get a decent browser now. Certainly not my sole reason for taking such an attitude, but definately good to see a little more variety filtering through.
I'm not gonna do shedloads of un-necessary work just because the worst browser on the net happens to be the most popular. Like I said: "F*** 'em".
I was wondering if there was a way to use valid CSS for transparency filters, without having to use JavaScript. Any clues?
Thanks.The CSS3 specification (<!-- m --><a class="postlink" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#opacity">http://www.w3.org/TR/2003/CR-css3-color ... 4/#opacity</a><!-- m -->) shows that the opacity property does exist, yet the validator considers it invalid; would, currently, all CSS3 be invalid?If you use the advanced css validator (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator-text">http://jigsaw.w3.org/css-validator/validator-text</a><!-- m -->), you will see that it does validate for css3 only.Originally posted by Fang
If you use the advanced css validator (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator-text">http://jigsaw.w3.org/css-validator/validator-text</a><!-- m -->), you will see that it does validate for css3 only.
Thanks. Any clue what to do for IE, or is there no alternative to JavaScript? (If there isn't, I won't use JavaScript anyway.
)I don't see what the big deal is. I use code that causes the validator to puke up errors, but it doesn't concern me because the code isn't really invalid — not my fault if the validator doesn't like it. If worse comes to worse and you have to use some IE-proprietary invalid stuff, oh well; sacrifices must be made.Originally posted by Paul Jr sacrifices must be made.
Which means IE users just won't have transparency.
Their loss. Originally posted by Jona Which means IE users just won't have transparency.
Their loss. Bingo.
div {opacity: .1;
/* IE */
filter: alpha(opacity=10);
width:100px; /* must have width or height */
/* Moz. */
-moz-opacity: .1;
}
Cascades very buggy in IE and Moz.
Doesn't work for Opera.Originally posted by Fang
div {
opacity: .1;
/* IE */
filter: alpha(opacity=10);
width:100px; /* must have width or height */
/* Moz. */
-moz-opacity: .1;
}
Cascades very buggy in IE and Moz.
Doesn't work for Opera.
lol. Thanks, but I should have been more clear; I knew all three properties, but I didn't know if there was another obtuse way to make it "valid" and at the same time work for IE.So how would I write this so that it would identify which browser is being used?
Also, the IE CSS listed - does it work in IE 6?
What about Safari?
I'd like to try it.Originally posted by ChrisBrown
So how would I write this so that it would identify which browser is being used?
Also, the IE CSS listed - does it work in IE 6?
What about Safari?
I'd like to try it.
Use both, the browser will only translate what it understands. Yes, it will work in IE6; if anything works for Safari it will be opacity. If you'd like to try it, what is holding you back?I'm afraid of trying it.
I'm just an efficiency freak, so I didn't want to waste my time this morning if it wasn't going to work well - but I usually just try stuff and see - I'm just busy this morning....I see. Well, if it's worth working, it's worth trying.
Ok, this did the opposite of what I really wanted - i would like the background to be transparent in the DIV. Let me re-phrase - I want to adjust the opacity of the background - sorry.Is that possible?You can generate it with javascript. Mozilla will interpret the javascript attribute as :
<html>
<body>
<div id="moz" style="background-color:black;width:100px;height:50px;">
</div>
<script>
document.getElementById("moz").style.MozOpacity=.5;
</script>
</body>
</html>What I ended up doing for now is placing two divs on top of each other - #1 is just the background, given an opacity value, and #2 is the actual content.That's the only way it works in Moz. and IE.
In IE this does work:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>opacity</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
.opaque {filter: alpha(opacity=20); -moz-opacity: .2;}
.styling {
width:10%; /* must have width */
padding:5px;
color:#000;
background:#f00;
}
.normal {position:relative;}
-->
</style>
</head>
<body>
<div class="opaque styling"><div class="normal">XXXX</div></div>
</body>
</html>I just use a .png with the desired opacity level and screw IE users untill they get a browser. F*** 'em I say.The problem is I know I have a lot of IE users, so I have to accomidate them.Yeah I used to think that. But now my allowances made for IE are minimal at best, regardless of what the audience may be. They can see a decenet site when either they get a decent browser or MS make one.
My pages have caused quite a few people to get a decent browser now. Certainly not my sole reason for taking such an attitude, but definately good to see a little more variety filtering through.
I'm not gonna do shedloads of un-necessary work just because the worst browser on the net happens to be the most popular. Like I said: "F*** 'em".