|
CSS - Png Transparency In Cell Classes
I'm using CSS to add dynamically-sized background images to my table cells. These images use PNG and transparency. This is all fine for Firefox (what I designed the site on), but doesn't work for IE. The known issue of IE not rendering PNG transparency. There are several workarounds on the internet, but they all involve image tags or straightforward backgrounds. I couldn't find anything addressing using images as cell classes.
So, I'm asking if anyone can provide a solution/fix to this problem. Thanks in advance. Similar Tutorialscurrently i have links defined as a certain color and changes to a certain color when i hover over them.. i have a table which has these links inside the cells and when i hover over the cell, the background of the cell changes color but the link wont change color until i hover over the link.. is there anyway so that when i hover over the cell i can make the link change color too? the problem is i have some padding for the cells, so once i go inside the cell but dont hover exactly over the link, the background will change but the link won't until i hover over it thanks I have a table that is populated using Spry. For some of the users, the table is showing its' borders in white when there is no data in the cell and for other users (like me) it's showing its' borders in black like expected. This is occurring in IE8 for the user. I have IE8 as well. Here is a setup of my table Code: <div id="Content">
<p class='instructions'>Click a column header to sort the table.</p>
<div spry:region="jdmba">
<div spry:state="loading" class="loading">Please wait while alumni data loads…</div>
<table class="spry" cellspacing="0" cellpadding="0">
<tr>
<th scope="col" width="108px" class="sortable" spry:sort="last" id="last">Last Name</th>
<th scope="col" width="106px" class="sortable" spry:sort="first" id="first">First Name</th>
<th scope="col" width="269px" class="sortable" spry:sort="account" id="account">Company</th>
<th scope="col" width="66px" class="sortable" spry:sort="state" id="state">State</th>
<th scope="col" width="82px" class="sortable" spry:sort="hls_year" id="hls_year">JD</th>
<th scope="col" width="82px" class="sortable" spry:sort="hbs_year" id="hbs_year">MBA</th>
</tr>
</table>
<div class="Overload">
<table class="spry" cellspacing="0" cellpadding="0">
<tr spry:repeat="jdmba" spry:setrow="jdmba" spry:odd="odd" spry:even="even" spry:hover="hover" >
<td width="108px">{last}</td>
<td width="106px">{first}</td>
<td width="269px">{account}</td>
<td width="66px">{state}</td>
<td width="82px">{hls_year}</td>
<td width="82px">{hbs_year}</td>
</tr>
</table>
</div>
</div>
Here is my CSS file Code:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#News a:link {
color: #00F;
}
#News a:hover {
color: #00F;
text-decoration: underline;
}
body {
background: #000 repeat;
}
#wrap {
background: #000;
width: 900px;
border: thick solid #9C0029;
float: left;
height: auto;
padding: 0px 0px 1em;
margin-top: 2%;
margin-left: 10%;
}
#footer {
font: bold small/50px Arial, Helvetica, sans-serif;
color: #FFF;
background: #9C0029;
text-align: center;
height: 50px;
width: 850px;
margin-left: 25px;
}
#Header {
background: #8F001C url(../images/banner.jpg) no-repeat center center;
width: 850px;
height: 150px;
margin-top: 20px;
margin-right: 20px;
margin-left: 25px;
}
h1 {
font: normal 18px Arial, Helvetica, sans-serif;
color: #000;
text-align: left;
}
h2 {
font: small Georgia, "Times New Roman", Times, serif;
color: #333;
text-align: justify;
}
h3 {
font: normal medium "Times New Roman", Times, serif;
color: #FFF;
}
h4 {
font-size: small;
color: #333;
text-align: left;
}
.banners {
background: #FFF0B2;
width: auto;
height: auto;
font: 18px Arial, Helvetica, sans-serif;
padding-top: .5em;
padding-bottom: .5em;
text-indent: 10px;
}
.Content {
font: 14px/normal Georgia, "Times New Roman", Times, serif;
text-align: justify;
display: block;
padding: 2em 3em 3em;
}
.Content a:link {
color: #00F;
}
.Content a:hover {
color: #00F;
text-decoration: underline;
}
.Content a:visited {
color: #00F;
}
#inner_body {
background: #FFF;
height: auto;
width: 800px;
margin-top: 0px;
margin-left: 50px;
padding-top: 0.5em;
padding-bottom: .5em;
}
#inner_border {
margin: 0em auto auto;
border: thin solid #8E887C;
width: 775px;
padding: 1em 0em 0em;
}
#nav_bar {
height: 3em;
width: 100%;
margin-left: 0%;
text-align: center;
}
#Content {
height: auto;
width: 95%;
padding: 0em 0% 5em;
margin: 2.5% 2.55% 2%;
text-align: left;
font-family: Verdana;
}
#nav {
height: auto;
width: 20em;
}
#News {
margin-left: 2px;
height: 30%;
background: #FFF0B2;
padding: 3%;
}
#News a:visited {
color: #00F;
}
.Overload
{
height: 208px;
overflow: auto;
}
.odd { background-color: #E8E8E8; }
.even { background-color: #E8E8E8;}
.hover { background-color: #FFC;}
table.spry {
font-family: Verdana;
font-size: 12px;
line-height:20px;
cursor: pointer;
}
.instructions {
font-family: Verdana;
font-weight:bold;
font-size: 12px;
line-height:20px;
cursor: pointer;
margin-bottom:8px;
}
.loading {
font-family: Verdana;
font-weight:bold;
font-size: 12px;
line-height:20px;
cursor: pointer;
margin-top:0px;
margin-bottom:8px;
color:#900;
}
table.spry th {
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
font-family:Verdana;
padding: 0px;
margin: 0px;
}
table.spry td {
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
font-family:Verdana;
padding: 0px;
margin: 0px;
}
table.spry th.sortable:hover { cursor: pointer; }
table.spry th.sortable { text-align:left; color:#FFFFFF; background: #8F001C url(../SpryAssets/bg.gif) no-repeat 95% 6px; }
table.spry th.ascending { background: #8F001C url(../SpryAssets/SpryMenuBarUpHover.gif) no-repeat 95% 8px; }
table.spry th.descending { background: #8F001C url(../SpryAssets/SpryMenuBarDownHover.gif) no-repeat 95% 8px; }
I'm only placing borders on the left and bottom so that in my detail cells the borders aren't doubled up. So for example when I have no data for the cell State, the left and bottom border of that cell is white rather than black. Any ideas? Thanks! I'm having some problems with CSS. If you look at the pictures below, the first is a screenshot of what it is supposed to look like. It's how it looks in most browsers. The second one, however, is how it looks in IE 6 on Windows and IE 5 on the Mac. It is wrong. Correct look Incorrect look I want to know how to fix this. The little colored boxes are supposed to be squares and have solid borders on them. The shape is off and the borders are missing on the IE version. Also, on the progress bar, there is not supposed to be space between the cells but there is. There is also space between every cell on the page and there is not supposed to be any. Here is my main CSS: Code:
body { background-color: #FFFFFF; }
a { text-decoration: none; font-weight: bold; }
a:link { color: #003366; background-color: transparent; }
a:visited { color: #003300; background-color: transparent; }
a:active { color: #339933; background-color: transparent; }
a:hover { text-decoration: underline; }
table { border: 1px solid black; border-collapse: separate; border-spacing: 0px;}
td, th { border: 0px solid black; padding: 5px; text-align: center; white-space: nowrap; }
tr.one { background-color: #FFFFFF; }
tr.two { background-color: #DDDDDD; }
table.squares { border: 0px; border-spacing: 1px; width: 50px; height: 10px; }
td.square { border: 1px solid grey; padding: 4px; }
td.nopadding { padding: 0px; }
.default { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; }
.h1 { font-size: 200%; font-weight: bold; text-align: center;}
.h2 { font-size: 120%; font-weight: bold; }
.h3 { font-weight: bold; }
.step { font-size: 150%; font-weight: bold; color: #999999; }
Here is one of the sets of squares: Code: <table class="squares">
<tr>
<td class="square" style="background-color: #CCCC66"></td>
<td class="square" style="background-color: #CC9966"></td>
<td class="square" style="background-color: #990000; border: black"><td>
<td class="square" style="background-color: #669966"></td>
<td class="square" style="background-color: #669999"></td>
</tr>
</table>
And finally, here is one of my progress bars: Code: <table style="color: white; width: 100px">
<tr>
<td style="padding:0px; text-align: right; padding-right: 5px; background-color:#222244; width:41px"></td>
<td style="padding:0px; text-align: left; padding-left: 5px; background-color:#666666; width:59px">40.7%</td>
</tr>
</table>
And in case that code is not enough, here is a link to the full HTML. According to this CSS test my CSS is not wrong. So does IE just suck? Is there something I can do to make it work in all browsers? My last question is, should I be using div tags for my boxes and progress bars instead of tables? I couldn't figure out how to make them work with divs so I just went with what I knew. Could someone give me an example of each using divs so I can learn how to make it work? Hi there! This might seem really basic but I don't seem to be able to remove the default border from a cell I created. The code looks like this: "<p> </p> <table align="center" style="margin-left: auto; margin-right: auto; border-width: 0px;"> <tbody> <tr> <td> <div style="overflow: auto; height: 475px; width: 700px; border-style: hidden;"> <p align="center"> <img height="457" width="600" src="images/stories/vlkommen3.jpg" alt="vlkommen3" style="margin: 0px; vertical-align: middle;" /> </p> <p align="center"> </p> <p> </p> </div> </td> </tr> </tbody> </table> <p> </p> How shall I do to hide the border? Thanks in advance! /Kristoffer 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? 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 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 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>
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 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 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? 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> 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. 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. 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 There, I am coding a design that has a semi transparent menu that uses this: Code:
#mainnav {
float: right;
background: #fafafa;
filter:alpha(opacity=65); /* IE Proprietary */
opacity: 0.65; /* CSS3 Standard */
-moz-opacity:0.65; /* Mozilla Property */
height:31px;
font-size: 1.1em;
}
When I add hover to any of the navigation items that fall within this parent div the transparency is maintained. I need the hover to be solid color, not semi transparent. Is there anyway to kill the transparency on hover? I have tried adding an 'a:hover' with the maximum opacity (0.99) to #mainnav and also independently to the child elements with no success eg: Code:
.nav-list-items a:hover {
display: table-cell;
height: 31px;
vertical-align: middle;
background-color: #ec7404;
color: #fff;
filter:alpha(opacity=99); /* IE Proprietary */
opacity: 0.99; /* CSS3 Standard */
-moz-opacity:0.99; /* Mozilla Property */
}
Any pointers would be greatly appreciated. Thank you! |
|||||||