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?
 
jabcocoConnect With a Mentor Commented:
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
 
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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
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
 
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
 
garethtnashAuthor Commented:
Thanks Jabcoco, i'll come back to you..
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.