|
CSS - Ie And Div Transparency W/ Filters
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. Similar TutorialsHello, 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 filter:alpha(Opacity=50); works in IE what can i use to get this same effect for Netscape, and other browswers across the board ? 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 Hey guys, I have a myspace layout.. and what I cannot figure out is how to get it to not be transparent!? http://www.myspace.com/thegoatherder13 I want the boxes to be plain red or something without that queer transparent look on it. Here is the template code. Code: <embed allowScriptAccess="never"src="http://home.comcast.net/~thegoatherder13/scenicroute.mp3" autostart="true" loop="true"
width="2" height="0">
</embed>
<style type="text/css">
table, tr, td { background-color:transparent; border:none; border-width:0;}
body {
background-image:url('http://mi4.bpcdn.us/atrucreation8/bg_bos_tile.gif');
border-color:CC2222;
border-width:5px ;
border-style: solid;
scrollbar-face-color:0d2b56;
scrollbar-highlight-color:0d2b56;
scrollbar-3dlight-color:0d2b56;
scrollbar-shadow-color:0d2b56;
scrollbar-darkshadow-color:0d2b56;
scrollbar-arrow-color:FFFFFF;
scrollbar-track-color:bf141a;
}
table table { border: 0px }
table table table table{border:0px}
table table table {
border-style:solid;
border-width:3px;
border-color:FFFFFF;
background-color:transparent;
}
table table table td {
background-color:bf141a;
filter:alpha(opacity=70); -moz-opacity:0.70; opacity:0.70; -khtml-opacity:0.70; }
table table table table td {filter:none;}
table, tr, td, li, p, div { font-family:helvetica; color:FFFFFF; font-size:12px; }
.btext { font-family:helvetica; color:FFFFFF; font-size:12px; }
.blacktext10 { font-family:helvetica; color:FFFFFF; font-size:12px; }
.blacktext12 { font-family:helvetica; color:FFFFFF; font-size:12px; }
.lightbluetext8 { font-family:helvetica; color:FFFFFF; font-size:12px; }
.orangetext15 { font-family:helvetica; color:FFFFFF; font-size:12px; }
.redtext { font-family:helvetica; color:FFFFFF; font-size:12px; }
.redbtext { font-family:helvetica; color:FFFFFF; font-size:12px; }
.text { font-family:helvetica; color:FFFFFF; font-size:12px; font-weight:bold; }
.whitetext12 { font-family:helvetica; color:FFFFFF; font-size:12px; font-weight:bold; }
a:active, a:visited, a:link { font-family:helvetica; color:EEEEEE; font-size:12px; }
a:hover { font-family:helvetica; color:AAAAAA; font-size:12px; }
a.navbar:active, a.navbar:visited, a.navbar:link { font-family:helvetica; color:FFFFFF; font-size:12px; }
a.navbar:hover { font-family:helvetica; color:FFFFFF; font-size:12px; }
a.redlink:active, a.redlink:visited, a.redlink:link { font-family:helvetica; color:FFFFFF; font-size:12px; }
a.redlink:hover { font-family:helvetica; color:FFFFFF; font-size:12px; }
.nametext { font-family:helvetica; color:FFFFFF; font-size:12px; }
</style>
</style>
<style type="text/css">
.contactTable {
width:300px !important; height:150px !important; padding:0px !important;
background-image:url(http://mi4.bpcdn.us/atrucreation8/redsoxct.jpg);
background-attachment:scroll; background-position:center center;
background-repeat:no-repeat; background-color:transparent;}
.contactTable table, table.contactTable td { padding:0px !important;
border:0px; background-color:transparent; background-image:none;}
.contactTable a img {visibility:hidden; border:0px !important;}
.contactTable .text {font-size:1px !important;}
.contactTable .text, .contactTable a, .contactTable img {filter:none !important;}
.contactTable .whitetext12 {display:none;}
</style>
<style type="text/css">
table table table td {vertical-align:top ! important;}
span.blacktext12 {
visibility:visible !important;
background-color:transparent;
background-image:url("http://mi4.bpcdn.us/atrucreation8/redsoxtop.jpg");
background-repeat:no-repeat;
background-position:center center;
font-size:0px; letter-spacing:-0.5px;
width:435px; height:75px; display:block !important; }
span.blacktext12 img {display:none;}
</style><br><br>
Ok I am new to CSS. It's a little confusing. But um, what I want to do is create a table with a embossed border and semi-transparent background. I've been told by my teacher that it can't be done but he's never tried or messed around that much with CSS. So I came here. and also what a div span blockquote select input those are all codes I've come across. So if you can please help me. I've also looked around and seen codes but I don't know how to input them... well I mean where. I have come across this: .background { filter:alpha (opacity=50);} I don't know if that would work. Thank you for your help. FLY Code: Ok, I have tried many many sites. they have each told me to do something different or where to write it in. except for one or two common things:
filter: alpha (opacity=50)
-moz-opacity= .5
opacity= .5
thats about it. i've been told to use style, id's, and class. its extremely confusing. also a lot of people say to use CSS but then some are saying its possible with html. but neway i've tried it doesnt work! can someone help. I am gonna be posting my html and css codes.
#1:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Lakewood YMCA Dance Program and Booster</title>
<!-- TemplateEndEditable --><style type="text/css">
<!--
@import url(../mel/semitransparent.css);
body,td,th {
font-family: Herculanum;
color: #000000;
}
a {
font-family: Herculanum;
font-size: 12pt;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFF00;
}
a:hover {
text-decoration: underline;
color: #E05D52;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.style1 {
color: #000000;
font-family: Herculanum;
}
-->
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body>
<br>
<table width="1170" height="809" border="0">
<tr>
<th height="174" colspan="2" scope="row"><img src="../mel/logofory.png" width="1060" height="112" border="0" usemap="#booster"></th>
</tr>
<tr>
<th width="296" height="37" scope="row">commentary</th>
<td width="864" rowspan="3"> </td>
</tr>
<tr>
<th height="352" scope="row">Here is where I will write all the little comments and blurbs about what we are about and what we do. also what we value and support</th>
</tr>
<tr>
<th height="181" scope="row">This is where we will post New events for everyone. we will also post if we won any competitions. </th>
</tr>
<tr>
<th height="53" scope="row">This is a I dont know space </th>
<td>this is where it will say who designed this, when, when updated, and who our host is. </td>
</tr>
</table>
<p><br>
<br>
<map name="booster" id="booster">
<area shape="rect" coords="126,87,249,107" href="../mel/boosterclub.htm">
<area shape="poly" coords="75,49" href="#">
<area shape="rect" coords="345,82,499,108" href="../mel/Danceprogram.htm">
<area shape="rect" coords="588,87,711,106" href="../mel/dancecamp.htm">
<area shape="rect" coords="783,84,971,107" href="../mel/fly.htm">
</map>
</p>
</body>
</html>
#2:
table, tr, span, li, p, div, textarea, DIV {
font-family: Herculanum;
color: #000000;
font-weight:normal;
font-decoration:none;
font-style:normal;
background-color:transparent;
border-color: #000000;
empty-cells:hide;
}
td, li, p, div, textarea {
font-family: Herculanum;
border-color: #000000;
}
table{
border-color: #000000;
}
a.navbar{
font-family: Herculanum;
font-size:12pt;
font-weight:bold;
}
a.navbar:link{
color: #CCCCCC;
}
a.navbar:active{
color: #FFCC00;
}
a.navbar:visited{
color: #CCCCCC;
}
a.navbar:hover{
color: #FFCC00;
}
a.searchlinkSmall{
font-family: Herculanum;
font-size:12pt;
text-decoration:none;
font-weight:normal;
}
a.searchlinkSmall:link{
color: #999999;
}
a.searchlinkSmall:active{
color: #FF0033;
}
a.searchlinkSmall:visited{
color: #999999;
}
a.searchlinkSmall:hover{
color: #FF0033;
}
body{
font-family: Herculanum;
background-color:
#89100D;
background-image:url(DanceFloor1-0_big.jpg);
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
}
.nametext{
font-family: Herculanum;
font-size:16pt;
color: #000000;
font-weight:bold;
}
.blacktext10{
font-family: Herculanum;
font-size:12pt;
color: #FF0000;
font-weight:normal;
}
.blacktext12{
font-family: Herculanum;
font-size:12pt;
color: #999999;
font-weight:normal;
}
.btext, .itext, .text{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:bold;
}
.orangetext15{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.lightbluetext8{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.tmz_imp{
font-family:arial;
color: #FF0000;
font-weight:bold
}
a img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:Alpha(Opacity=60);
}
a:hover img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:none;
}
body{
scrollbar-arrow-color: #FF0000;
scrollbar-Track-color: #990000;
scrollbar-Highlight-color: #FF0000;
scrollbar-base-color: #FF0000;
scrollbar-Face-color: #990000;
scrollbar-Shadow-color: #FF0000;
scrollbar-DarkShadow-color: #FF0000;
}
#3:
tbody {background-color:#FF6971;
width: 300px;
margin: 0 50px;
border: 2px;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
body,td,th {
font-family: Herculanum;
color: #000000;
}
a {
font-family: Herculanum;
font-size: 12pt;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFF00;
}
a:hover {
text-decoration: underline;
color: #E05D52;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.style1 {
color: #000000;
font-family: Herculanum;
}
#transbox {
width: 300px;
margin: 0 50px;
background-color: #CF0000;
border: 2px solid;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
#bg {
width: 400px;
height: 300px;
background: url(redbg.jpg);
background-repeat: repeat;
border: 0;
}
#transbox div {
font-weight: bold;
color: #000000;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
position: relative;
visibility: hidden;
}
These are all just some of the stuff I've had to go through.
here are some sites too:
http://www.quirksmode.org/index.html?/css/opacity.html
http://www.mandarindesign.com/opacity.html
http://www.domedia.org/oveklykken/css-transparency.php
I'm going crazy! :confused: plz help!! ><
Hi, I would like to have al my boxes and td's, tr's, table's and other frames transparant. Can i do this with CSS only? You can view my site @ URL , the penguin has to be full seen! With a friendly greet, Dieter Van Houtte Hi there people. Is there ANY code or ANY way around making an CSS image have a transparency layer ontop, and then Font ontop of the transparency (but the font isnt included with the transparency layer) ? As it works fine in IE but not FF. Its driving me mad! lol Hey everyone, I'm relatively new to CSS and I was hoping to incorporate some transparency effects onto my webpage. What I'm looking at is basically having opaque text over a div with a partially transparent background. When you take out the unnecessary stuff this is basically what it boils down to: Code: <div style="opacity: 0.5;background: #FF0000;"> <span style="opacity: 1;">opaque text on a translucent background</span> </div> The problem is when I open this is Firefox (version 2.0.0.1) I end up getting the 50% transparent red background but the text as well is 50% transparent...does anyone know what's wrong with this? I am having quite a time finding out if it's possible to use the AlphaImageLoader hacks on a png to make it a background image. I need this for drop shadows on a gradient page background. I have found a site that does have working png transparent backgrounds he http://thedesignspace.net/css/transparentPNG.htm For some reason, even though my code is basically the same with the image location changed, it fails to work for me, while that page does. My code can be seen at http://codymays.net/~private_ftp/theed. If you look at the source you'll see the IE specific css file. Works fine in opera/ff. Any help would be greatly appreciated. Hello, If you visit: http://tombraiders.net/katie/newsite/index2.shtml user: letme pass: in You'll see my main content area does not fill to the footer. Any ideas how to fix this? The CSS page is he http://tombraiders.net/katie/newsite/style.css I'm trying to set up a new layout for my game. The way I want it set up is with a seamless background covering the entire player's screen, and the rest of the game (Tables, mostly). I want that part of the game to be semi-transparent, something like 80 or 85% opacity. I am rather inexperienced with CSS, so any help is appreciated. Would it be useful for me to paste the css code I have right now? I have a block of html that is something like this: Code: <li id="captionFrame"><div class="caption"><h3>test</h3><p>test</p></div></li> The opacity of #captionFrame is set to 0.7; Code: #captionFrame{ background-color: #111; opacity : 0.7; }
This works well in making the frame translucent, the issues is that, the text also become transparent. I've tried to resolve this by setting up the .caption class to have an opacity of 1.0 Code: div.caption { opacity: 1.0; }
but this doesn't have any affect. Anyone know any tips for handling this issue? someone help me, it's driving me crazy. i have a simple navigation menu where i have a semi transparent PNG image as the original image. when the image is moused-over, it changes the image to another semi-transparent via javascript. the issue is, when i mouse-out the image, i want it to return to the original semi-transparent image. however, while it does return to the same image, it is not as transparent as it should be. [image: 50% opaque] --> (mouse over) --> [image:70% opaque] --> (mouse out) --> [should go to image: 50% opaque] it is doing it in both IE and Firefox. is there a fix for this? thanks!! Hi, I have been trying to get this to work for a long time. It is a table with a 30% transparency fill and white text. Except the text always comes across as transparent also. Please can anyone help to make this work. Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Transparency Test</title> <style type="text/css"> .box { background-color: grey; opacity:0.3; filter:alpha(opacity=30); -moz-opacity:0.3; -khtml-opacity:0.3; } .text { opacity:1; filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; float: center; font-size: 16px; color: #ffffff; width: 100; font-style: bold; } </style> </head> <body bgcolor="black"> <table width="200"> <tr> <td class="box" align="center" > <p class="text"> Testing </p> </td> </tr> </table> </body> </html> Hi folks, new to the forums, having a problem that I've never encountered (mostly because I shy away from using transparency in the first place). A client gave me a website that was based on a template. Basically, #sitename is a div at the top of the page and i placed a transparent.png as a logo in the top. displays fine in firefox, in ie it has a solid color where the transparency should be. I researched and found a hack, which you can see in my code: Code: #sitename{
background:url(img/headernew.png) top center no-repeat;
font-weight:400;
height:130px;
margin:0 20px 10px 0;
text-align:center;
*background:none;
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader (src='img/headernew.png',sizingMethod=scale);
}
however, it stretches the image and makes it all mis-sized. Is there any way to achieve transparency in a div without this hack? Hello, I am in the process of re-doing a page of my site in CSS...the working page is he http://www.tombraiders.net/katie/test/index.html CSS file he http://www.tombraiders.net/katie/test/style_index.css I have the body part semi transparent so you can see through to the background a little bit. Now my problem is that the header is also transparent, which is what I don't want. Does anyone know how I can isolate the body so the header is not transparent as well? Thanks Hi folks, Heres a basic layout I created that includes a transparent PNG file with text wrapping around the image pretty well. http://agogo.dnsdojo.com/img/png_test/1.html I would like the layout to look more like this though: http://agogo.dnsdojo.com/img/png_test/indesign.png With the text wrapping around the circle. Considering the PNG file has transparency is there a way to do this with CSS. |
|||||||