|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
February 12th, 2004, 06:34 PM
|
|||
|
|||
|
CSS Opacity for Table BG driving me nuts
If it works in Netscape, it will not work in IE
If it works in IE, it will not work in Netscape. Soo, what am I to do? Okay, Im trying to make a table bg have an opacity of 40%. I've gone over the net to figure out the problems, knowing that filter:alpha{} is not recognized by Netscape. So, I found some information to help overcome Netscape woes, and now the opacity isn't work in IE. I need help before I rip all my hair out. So below is what Im working with. Code:
<html>
<head>
<style type="text/css">
#menu {
background-color: #FFFFFF;
filter: alpha(opacity=40);
filter: progid;:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.40;
position:relative; top:0;
}
.tdbg {
background-color: #FFFFFF;
filter: Alpha(Opacity=40);
}
</style>
</head>
<body>
<table width="610" border="0" cellpadding="5" cellspacing="0" bgcolor="#FF0000">
<tr>
<td align="center"> <table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="tdbg">FOO</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><div id="menu">FOO</div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
So, basically the top cell is "correct" in IE, but the bottom cel is not. And opposite for Netscape (7.0+) How can i fix it so its the same for both browsers?
|
|
#2
February 12th, 2004, 09:21 PM
|
|||
|
|||
|
Okay figured out the cross browser problem:
Code:
#submenu {
background-color: #FFFFFF;
height: 150px;
width: 301px;
/* Mozilla ignores the following */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.40;
}
is my new css Implemented this way: Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="submenu">foo foo foo </div></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
Now the new problme is that the words foo foo foo also appear as 40% opacity within the table cell. How can I change it or have it so that the text (or other elements) are not affected by the CSS?
|
|
#3
February 13th, 2004, 03:45 AM
|
|||
|
|||
|
try placing foo into a container, P, perhaps.
If they still inherit opacity try setting 100% opacity for all paragraphs... both in IE and mozilla. btw, impressive coding. 
|
|
#4
February 13th, 2004, 01:44 PM
|
|||
|
|||
|
Will try that suggestion. Thanks
And thanks on the coding. took about 2 hours of fedangling to get it just to work right in both browsers. Now, another few just to get the text working right 
|
|
#7
March 4th, 2004, 12:37 PM
|
||||
|
||||
The css equivalent of duct tape and safety pins...
I think I've got a solution to your problem, using the code you already supplied...
Code:
#bar
{border: 1px solid #ffffff;
height: 14px;
width: 301px;
}
#subbar
{background-color: #56739E;
height: 14px;
width: 301px;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.40;
}
#bartext
{color: #CB966C;
font: bold 10px verdana;
position: relative;
top: -13px;
right: -3px;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1.00;
}
...within the style tag. Later in the page... Code:
<div id=bar><div id=subbar></div><div id=bartext>Thursday, March 4th, 2004>> 1:21PM</div></div> The id "bar" puts a 100% opacity border around it, as well. Just change the negative bartext values according to the height of your subbar...seems to work fine for me, even though it's more of a McGuyver solution to the problem. 
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS Opacity for Table BG driving me nuts |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
