[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

CSS Transparency - FireFox - Opera - Netscape etc

Posted on 2008-11-09
10
Medium Priority
?
623 Views
Last Modified: 2012-05-05
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
0
Comment
Question by:garethtnash
  • 6
  • 4
10 Comments
 
LVL 10

Expert Comment

by:jabcoco
ID: 22916260
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
 
LVL 10

Expert Comment

by:jabcoco
ID: 22916273
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
 

Author Comment

by:garethtnash
ID: 22916564
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 10

Expert Comment

by:jabcoco
ID: 22916692
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
 

Author Comment

by:garethtnash
ID: 22916950
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
 
LVL 10

Expert Comment

by:jabcoco
ID: 22916978
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
 
LVL 10

Expert Comment

by:jabcoco
ID: 22945495
Still need help?
0
 

Author Comment

by:garethtnash
ID: 22948429
I've kind of given up on this I just couldn't get it to work in FF?
0
 
LVL 10

Accepted Solution

by:
jabcoco earned 2000 total points
ID: 22948941
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
 

Author Comment

by:garethtnash
ID: 22949023
Thanks Jabcoco, i'll come back to you..
0

Featured Post

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month17 days, 23 hours left to enroll

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question