|
CSS - Opacity Filters For Other Browsers
filter:alpha(Opacity=50); works in IE
what can i use to get this same effect for Netscape, and other browswers across the board ? Similar TutorialsHi, I have a div which is somewhat transparent. There is no problem there. Then I have textin this div, which is also showing up with transparency, and this is the problem. I need the text to be 100% opaque. Here's the div css: Code: .rounded_STYLE
{
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
width: 224px;
background-color: #616161; /* if needed */
/* border: 1px solid BORDER_COLOR; */ /* if needed */
-webkit-border-radius: 4px; /* for Safari */
-moz-border-radius: 4px; /* for Firefox */
}
Here's the text css: Code: .bodywhite{
margin:0px, 4px, 4px, 4px;
opacity:1;
font-size:10px;
color:#FFFFFF;
font-weight:normal;
}
I've tried different numbers in the opacity value, but to no avail. Here's the site:site any ideas? thanks Ok, I am creating an image gallery that is composed of a square layer that has opacity of 50. I have created 9 other div layers within that layer to hold thumbnails. When I put images in those thumbnail divs, the image shows up as semi-transparent. I do not want this. Here is my code, how can I turn off opacity just in those div thumbnail squares? CSS Code:
DIV.outer
{
position:absolute;
left: 50%;
top: 50%;
width: 500px;
height: 488px;
border:2px solid white;
margin-left: -250px; /* half of width */
margin-top: -244px; /* half of height */
}
DIV.inner
{
position:absolute;
left: 50%;
top :50%;
width: 500px;
height: 488px;
margin-left: -250px; /* half of width */
margin-top: -244px; /* half of height */
background-color:#CC6666;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
div.tn
{
position:absolute;
width:115px;
height:115px;
background-color: #660000;
layer-background-color: #660000;
border: 1px none #000000;
}
HTML Code:
<div class="outer">
<p> </p>
<div class="inner">
<!--row 1!-->
<div class="tn" style="z-index:2; left: 50px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
<div class="tn" style="z-index:2; left: 192.5px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
<div class="tn" style="z-index:3; left: 335px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
<!--row 2!-->
<div class="tn" style="z-index:2; left: 50px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
<div class="tn" style="z-index:2; left: 192.5px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
<div class="tn" style="z-index:3; left: 335px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
<!--row 3!-->
<div class="tn" style="z-index:2; left: 50px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
<div class="tn" style="z-index:2; left: 192.5px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
<div class="tn" style="z-index:3; left: 335px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
</div>
</div>
What i'm trying to get at here is how do I get non transparent items in a transparent div box? This is driving me absolutely insane. I'm trying to figure out WHY this DIV isnt showing up as transparent in IE. I have a DIV with the following style applied to it: Quote: .blocktitle { text-align: center; padding: 3px; font-weight: bold; background-color: black; color: white; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } I have a table.. at the top I want a title bar thats transparent, and the content below. I need the transparency so if I change the color of the TD the titlebar still stands out and matches with the new color. Problem is.. this doesnt work in IE and I'm losing my mind Mozilla.. works awesome. IE.. the titlebar is black and not transparent at all. If I set the position to absolute it goes transparent just fine! But then the content below invades the spacing for the title bar. Here's the HTML: Quote: <table border="0" cellpadding="0" cellspacing="0"> <tr> <td style="background-color: green;"> <div class="blocktitle"> Test Title </div> <div style="height: 1px; background-color: black;"><img src="/images/spacer.gif" height="1" width="1"/></div> Some content goes down here. </td> </tr> </table> Any help would be greatly appreciated. Hello, im new to this forum ( A pleasure to meet everyone! ) I was browsing through the forum and could not find exactly what my problem is. I am trying to make a filter for my CSS code with the dropshadow effect on text. Eg: .content { color: White; text-align:justify; line-height:12px; font-family:tahoma,arial narrow,arial; font-size:9px; Filter: Alpha(Opacity=70) DropShadow(Color=#8F5A3A, OffX=1, OffY=1, Positive=1); } The problem is its just not working Its hard for me to get the colors correct to begin with because of the BG the text is on. But If I could get the Alpha(Opacity) to work with the DropShadow the text will be significantly more visible and would work fine. Any suggestions? or Solutions? Keep in mind im NOT very knowledgable in a lot of new things yet Help much appreciated- Thanks a lot! I viewed several examples of use of CSS filters like blur wave mask etc with various browsers but none reflected the changes, how come ? Friends, I have been developing a website in IE, and I've been using the dropshadow filter in CSS from Microsoft on a few of my <DIV>'s. All was well. Today I was introduced to Firefox - I like it, but my CSS filters are not rendered in firefox. Is this an additional that is yet to be made to the new rookie browser? Jonathan Here is some code I've started for a project. It is for IE 5+ and uses filters. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body id="bodyid" bgcolor="f3f3f7" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no"> <script language="JavaScript1.1"> function resizePage(){ windowHeight = (document.getElementById('bodyid').clientHeight - 60); document.getElementById("bottomTable").style.height = windowHeight ; } </script> <style type="text/css"> .tddrop { filter: progid:DXImageTransform.Microsoft.dropShadow(Color=DDDDDD,offX=3,offY=3,positive=true); border: solid #c0c0c0 1px; background-color: #ffffff; } .spacer{width:15px} </style> <table border="0" bgcolor="#34487E" style="width=100%" cellpadding="0" cellspacing="0" > <tr valign="top"> <td style="height:50" valign="middle" > <!--- Top bar including left image ---> <table border="0" cellpadding="0" cellspacing="0" style="width:100%;height:100%" > <tr> <td> <!---- image here... ----> </td> <td style="width:100%;filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=1, StartColorStr='#34487E', EndColorStr='#C5D1E1')"></td> </tr> </table> </td> </tr> <tr><td style="height:1" bgcolor="#7c7c94"></td></tr> <tr> <td style="height:10;filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#f3f4fa', EndColorStr='#9997b5')"> </td> </tr> <tr><td style="height:1" bgcolor="#7c7c94"></td></tr> </table> <table id="bottomTable" border="0" style="width:100%;height:300" cellpadding="0" cellspacing="12" > <tr> <td class="tddrop" style="width:180;"> </td> <td class="tddrop"> </td> </tr> <script>resizePage();</script> </body> </html> Notice that between the two colums, the <td>'s are not lining up at the bottom. If you remove the shadow filter they line up fine. Anyone have an idea why this might be so? Thanks hi, ive been messing with opacity and want to know if i can achieve this. I would like to have a background image on my page, then lay some divs over it. I want the image to be full opacity around the divs and be faded in the divs. so i thought i'd add a class to the divs: .opaq { filter: alpha(opacity=50); opacity: 50%; -moz-opacity:0.5; } but the div inside with my content inherits the opacity and therefore is faded too is there a way of having the opacity on the background of the div yet have the content 'full' wat about z-index? to bring the content to the front heres a pic: I am trying to make the background transperency.. but the text on it should be bright and visible.. but i am not able to make the text brighter opacity:0.25; -moz-opacity:0.25; filter:alpha(opacity=25); u can look at the menu bar here http://www.harshamv.com/test/ I have a weird problem. I've applied opacity in my stylesheet for a few elements. My opacity is working fine in FF, but not in IE. Here's the code I have: filter: alpha(opacity=75); -moz-opacity:0.75; opacity:.75; I've also applied it inline as well as in the stylesheet. Page is located at: ebonyevans.coastaldistribution.com/index.php The top center and top left music player should be opaque. Anyoen see what I'm doing wrong? Can someone explain me how to set on a photo-background ( opacity 100% 640x480 ) a square of 320x320 as size and opacity @ 25% and on that square i have to put some text that is at 100% opacity. The problem is that when i set 100% opacity for the text... it gives me 100% of the 20% opacity... i need to get the full 100% of 100% opacity... can someone explain me ? And another question... how can i set an opacity for Opera Browsers ? I have opacity set for a column <td> but I only want the background image to be 50% opaque, not the text too. I tried the following... <td style="filter:alpha(opacity=50);"> <span style="filter:alpha(opacity=100);"> Text here...</span></td> Is there a reason why the 2nd style="filter:alpha()" has no effect on the text what so ever? The image is already transparent, I exported it as a PNG file with transparency allowed or what not. I was wondering if anyone knows a way to have use Opacity witin a div tab but then have another div tag in side of it not affected by Opactiy. Here is the code i have I want background to be transparent but not transbox. But setting the opacity to 100 in transbox wont over ride background.: Code:
<html>
<head>
<style type="text/css">
div.background
{
width: 500px;
height: 250px;
background-color: 000000;
border: 2px solid black;
opacity:0.6;
}
div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
opacity:0.100;
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
i cant get IE to render opacity correctly. filter: alpha(opacity=50); opacity: .5; i know the filter is for Firefox and the opacity is for IE. but it doesnt seem to work. any ideas? I've set the main div content for opacity like this #content-main { margin-right:1%; margin-top:0; margin-bottom:2%; width:58%; background-color:#ffffff; filter:alpha(opacity=70); opacity:0.7; } but when I put an image in the div it acquires the opacity, and I want it to have none. I've tried to give it a style of opacity:1 and it didn't help. I tried alterting the image z-index to greater than 1 and it didn't help. How do I get the image not to acquire the opacity of the div? Thanks hey all, i have a small problem with opacity. i have a table that is populated using php and the lines are coloured two different colours using a different div class. one is just white..no worries there, the other is a blue that i have added opacity to as i couldn't find the colour i wanted otherwise. However the writing that appears on in the cell that has the blue opacity div class is also opaque and so it looks grey rather than black!! i hope that makes sense !! here is the code for the div classes Code:
<style>
.whitebg {margin: 0 0 0 0; padding: 0 0 0 0; background: #ffffff;}
.bluebg {margin: 0 0 0 0; padding: 0 0 0 0; background: #99ccff; opacity: .5; filter: alpha(opacity=50); -moz-opacity: .5;}
</style>
[/CODE
here is the code for the text (this is in a .css file rather than embeded in the html page.
[CODE]
.labels2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size:14px;
font-weight: bold;
}
.normal {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size:12px;
}
and here is the html/php PHP Code: <?php $i=0; while ($row = @ mysql_fetch_object($getdataR)) { ?> <tr> <td <?php if($i%2){ print 'class="whitebg"'; }else{ print 'class="bluebg"'; } ?> ><span class="labels2"><?php print $row->blog_subject;?></span> <?php if(!empty($row->r_link)) { print " - <a target=\"_blank\" href=\"".$row->r_link."\">Related Link</a>";} ?> <br> <span class="normal"><?php print $row->blog_msg; ?></span><br> <span class="small">(Posted By: <?php print $row->posted_by; ?> on <?php print $row->blog_submitted; ?>)</span><br> <br> </td> </tr> <?php $i++; } if anyone can advise that would be great, thanks RF I have a problem with a website Im working on, the text on most of the pages e.g. www.topviplimosdubai.com is supposed to have a transparent white background behind it but on some browsers naming firefox it doesn't show up making the text unreadable, I don't understand what's causing this problem but I can only imagine it to be a css compatibility problem. see my css code below I would very much appreciate your help. thank you Code:
@charset "utf-8";
body {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #000000;
margin: 0px;
padding: 0px;
font-size:18 qpx;
background-image:url(topviplimos/BG.jpg);
}
.FCap {
font-size:36px;
font-weight:bold;
}
.TitleBar {
position:relative;
}
.main2
{
margin-left:125px;
width:665px;
overflow:hidden;
margin-bottom:19px;
color:#000;
position:relative;
filter:Alpha(opacity=40);
_background:#FFFFFF;
_position:static;
}
.main
{
margin-left:125px;
width:665px;
overflow:hidden;
margin-bottom:19px;
color:#000;
position:relative;
filter:Alpha(opacity=85);
_background:#FFFFFF;
_position:static;
}
.bd{
zoom:1;
padding:22px;
font:72%/1.6 Arial;
position:relative;
}
.lower1 {
margin-top: 800px;
position:relative;
}
.bd img {
float:left;
left:-10px;
position:relative;
margin-bottom:19px;
}
.HigherZ {
z-index:5;
}
.bd embed {
z-index:6;
}
.Jia {
float:left;
left:-10px;
position:relative;
margin-bottom:19px;
}
.Jia2 {
float:right;
left:0px;
position:relative;
margin-bottom:19px;
}
.TitleTex {
font-size:15px; font-weight:bold;
color:#000066;
position:relative;
top:-9px;
z-index:5;
}
a {
text-decoration:none;
color:#0000AA;
font-weight:bold;
}
.kk {
border-top-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
a:hover {
font-weight:bold;
color:#AA1100;
}
.ft[class]{
background:#FFFFFF;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
opacity:0.85;
z-index:-1;
*position:static;
*opacity:1;
*background:transparent;
}
.ft2[class]{
background:#FFFFFF;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
opacity:0.4;
z-index:-1;
*position:static;
*opacity:1;
*background:transparent;
}
Does anyone know an element to control table opacity for a stylesheet? Or a stand-alone tag, for that matter...? I am trying to impose a translucency for the background image of my page (using CSS background-image), so that if there was no text on the page, the image looks solid, but when text is displayed over the page, the text takes precedence and looks solid, but the underlying bits of the background image becomes translucent, only partially showing through so as not to conflict with the text. How do I achieve that with CSS? I was thinking along the lines of doing something with the background attribute of the text itself, like an XOR bit-mask of sorts, so that underlying bits of the background image on the page would be XOR'd with the background of the text to create a washed-out effect. Or something like that. Any ideas? Thoughts? i have a css box that has opacity however when i display images inside it does it to the images too is there a way around that
Code: /* for IE */ filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.6; |
|||||||