CSS Transparency - FireFox - Opera - Netscape etc

Hi there, I'm having a few problems with CSS transparency on my new site - onlineblooms.net, I've started to get it to look how I want it to in IE7, but when i test it in Firefox, Opera, Netscape etc, it just looks very faded, nothing like I want it to look like (IE7)

Any idea what I am doing wrong, I followed the example from here http://www.domedia.org/oveklykken/css-transparency.php but now having viewed that page in FF it seems as though he has the same problem with his llast example??

Thanks
garethtnashAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

jabcocoCommented:
Simply set those css properties.
hope this help.
filter:alpha(opacity=90);
opacity:0.9;
-moz-opacity:0.9;
-khtml-opacity: 0.9;

Open in new window

0
jabcocoCommented:
You may also refer to this solution (see Leith Bade comment)
http://davidwalsh.name/cross-browser-compatible-css-opacity
Here a copy of is comment.

For IE 8 that code needs to be changed to:
 
.show-50 { -moz-opacity:.50; -ms-filter:alpha(opacity=50); filter:alpha(opacity=50); opacity:.50; }
 
And to support old 1.x versions of Safari:
 
.show-50 { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:alpha(opacity=50); filter:alpha(opacity=50); opacity:.50; } 

Open in new window

0
garethtnashAuthor Commented:
I've put the following in, but it still looks bad in FF??
#mainwrapper{
	width: 792px;
	margin: 0px auto;
	padding-top: 0px;
	background-color: #333333;
	filter:alpha(opacity=50);
	opacity: 0.5;
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
}

Open in new window

0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

jabcocoCommented:
Would you provide a simple code example of how you use it cause in this example it's work perfectly under FF 3.0.3
<html>
<style type="text/css">
#mainwrapper{
        width: 792px;
        margin: 0px auto;
        padding-top: 0px;
        background-color: #333333;
        filter:alpha(opacity=40);
        opacity: 0.4;
        -moz-opacity:0.4;
        -khtml-opacity: 0.4;
        color:#FFF;
}
</style>
<body style="background-color:#fff">
<div id="mainwrapper">Good Style</div>
</body>
</html>

Open in new window

0
garethtnashAuthor Commented:
I'll attach the page -
and the css -

@charset "utf-8";
/* CSS Document */
body{
	margin:0px;
	padding: 0px;
	background-image: url(../images/background2.jpg);
}
h1{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #FE9F0F;
}
#mainwrapper{
	width: 792px;
	margin: 0px auto;
	padding-top: 0px;
	background-color: #333333;
	filter:alpha(opacity=50);
	opacity: 0.5;
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
}
#wrapper{
	width: 792px;
	float: left;
	position: relative;
	filter:alpha(opacity=100);
	opacity: 1;
	-moz-opacity:1;
	position:relative;
}
#head{
	width: 792px;
	height: 205px;
	float:left;
}
#footer{
	width: 792px;
	float:left;
	border-left: 1px solid #333333;
	border-right: 1px solid #333333;
	background-color: #141C64;
	filter:alpha(opacity=80);
opacity: 8;
-moz-opacity:8;
position: relative
}
#mainsection{
width: 780px;
float:left;
}
#topbar{
	width: 776px;
	height:60px;
	padding: 8px;
	text-align: right;
	vertical-align:top;
	float:left;
	display: none;
}
#undertopnav{
	height: 60px;
	padding: 8px;
	width: 776px;
	text-align: right;
	vertical-align:bottom;
	float:left;
}
#topnav{
	width: 792px;
	height: 37px;
	text-align: right;
	vertical-align: middle;
	float: left;
}
#topnav ul{
	list-style: none;
	padding: 0;
	margin: 0;
}
#topnav li{
float: right;
font-size: 0.9em;
}
#topnav a{
	width: 90px;
	font-size: 0.8em;
	text-align:center;
	height:12px;
	vertical-align:middle;
	display:block;
	padding: 10px 0px;
	background-color: #FFB106;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
	margin-left: 2px;
	background-image: url(../images/buttonhead/orange.jpg);
	background-repeat: repeat-x;
		filter:alpha(opacity=80);
	opacity: 0.8;
	-moz-opacity:0.8;
}
 
.copyright{
	font-size: 0.7em;
	text-align: right;
	float: left;
	padding: 2px 8px;
	width: 776px;
}
.CollapsiblePanel {
	padding: 0px;
	margin-bottom: 8px;
	width: 160px;
}
.CollapsiblePanelTabocc {
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	width: 160px;
}
.CollapsiblePanelTabocc h3{
	padding: 4px;
	font-size: 0.9em;
	font-family:Arial, Helvetica, sans-serif;
	color: #141C64;
	font-style: italic;
}
.CollapsiblePanelContent {
	margin: 0px;
	padding: 0px;
}
.CollapsiblePanelTab a {
	color: black;
	text-decoration: none;
}
.CollapsiblePanelContent ul{
	list-style: none;
	padding:0;
	margin:0;
}
.CollapsiblePanelContent li{
 
}
.CollapsiblePanelContent a{
	padding: 4px 6px;
	width: 148px;
	display: block;
	text-decoration:none;
	font-size: .76em;
	background-color: #fff;
	filter:alpha(opacity=50);
	opacity: 0.5;
	-moz-opacity:0.5;
	font-family: Arial, Helvetica, sans-serif;
	color: #141C64;
	font-style: italic;
}
#mainback{
	width: 780px;
	float:left;
}
#righteight{
	width:5px;
	float:right;
}
#leftteight{
	width:5px;
	float:left;
}
#innertopmain{
	width:792px;
	float:left;
	background-image: url(repeat-x);
}
.productboxsm{
	width:180px;
	float: left;
	margin:0px 6px 12px 8px;
	height: inherit;
	border: 1px solid #000000;
	background-color: #333333;
	filter:alpha(opacity=70);
	opacity: 0.7;
	-moz-opacity:0.7;
}
.productboxsm ol{
list-style:none;
margin:0;
padding:0;
}
.productboxsm img{
	margin-bottom: 8px;
}
.productboxsm li{
	margin-left: 14px;
	width: 152px;
	display: block;
}
.productboxsmimg{
	width: 150px;
	height: 150px;
	border: 1px solid #CCCCCC;
	margin-top: 14px;
	filter:alpha(opacity=100);
	opacity: 1;
	-moz-opacity:1;
	position:relative;
}
.productnamesm{
	font-weight: bold;
	margin-top: 0px;
	margin-bottom: 6px;
}
.productdescsm{
	margin-top: 0px;
	margin-bottom: 6px;
}
.productpricesm{
	text-align: center;
	margin-top: 0px;
	margin-bottom: 6px;
}
.buynow{
}
.moreinfo{
margin-left:8px;
}
.flashimage{
	width: 200px;
	height: 200px;
	float: right;
	clear: right;
	margin: 4px 4px 4px 8px;
	padding: 2px 2px 2px 8px;
}
.hompagediv{
	float: left;
	width: 594px;
}.productdiv{
	float:left;
	width: 594px;
	margin-bottom: 25px;
	padding-bottom: 25px;
}
.lititle{
	height: 25px;
	margin:0;
	padding:0;
	filter:alpha(opacity=100);
	position:relative;
	opacity: 1;
	-moz-opacity:1;
	font-family:Arial, Helvetica, sans-serif;
	font-size:.8em;
	font-weight: bold;
	color:#FF9900;
}
.lidescription{
	height: 55px;
	font-family:Arial, Helvetica, sans-serif;
	color:#CCCCCC;
	font-size: .8em;
	filter:alpha(opacity=100);
	opacity: 1;
	position:relative;
	-moz-opacity:1
}
.liprice{
	position:relative;
	height:25px;
	text-align: right;
	filter:alpha(opacity=100);
	opacity: 1;
	-moz-opacity:1;
	font-family:Arial, Helvetica, sans-serif;
	font-size:.8em;
	color:#FFFFFF;
	font-weight: bold;
}
.libut{
	position:relative;
	height:25px;
	text-align: right;
	filter:alpha(opacity=100);
	opacity: 1;
	-moz-opacity:1
}
.lixx{
margin:0;
padding:0;
}
h2{
font-family:Arial, Helvetica, sans-serif;
font-size:.9em;
color:#FFFFFF;
}
#mainarea h3{
	font-family:Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 1em;
	margin-bottom: 7px;
}
input#eCart1_1_Quantity_Add{
width: 19px;
}

Open in new window

pagecode.doc
0
jabcocoCommented:
Well. dont need to full code... the best way to find your problem is to "clean" your code and go it why basic exemple. From their you can find what your problem... looks more a "html code, div"  problem then css bugs. So i will suggest to simplify your page with and put only what is not working. From their do the same with the css, then send me back your css/html code.

thanks
0
jabcocoCommented:
Still need help?
0
garethtnashAuthor Commented:
I've kind of given up on this I just couldn't get it to work in FF?
0
jabcocoCommented:
Well.. the example i give is the way to go.. the problem probable some with your html structure. The best way to find your problem is to remove all other thing from the page and just keep what is not working. Their i'le be eaisier to find the problem. You can also use "FireBug Add-On" for firefox, it's a nice debugging tools.

let me know.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
garethtnashAuthor Commented:
Thanks Jabcoco, i'll come back to you..
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.