Cross Browser Opacity

[zethos]

I’m having trouble getting my opacity to look the same on all browsers. The box is at the top of my page that the navigation is on. It looks perfect in Firefox but doesn’t show up at all in Chrome or Safari. You can see it here [Your text to link here…](http://culicanlab.businesscatalyst.com/index.html “http://culicanlab.businesscatalyst.com/index.html”)

The css for the box is:

#gray {
position:absolute;
right:0px;
top:0px;
width:200000em;
background-color: #000000;
border-bottom: 2px solid #FFFFFF;
height: 105px;
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=40)”; // first!
filter: alpha(opacity=50);
opacity: .4;
}

Thanks for the help!

[Kitty Giraudel]

You might want to use width: 100% instead of width: 200000em. I think your browser will thank you for that. :)

About opacity, you can’t do much better than:

.transparent_class {

/* IE 8 */

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";



/* IE 5-7 */

filter: alpha(opacity=50);



/* Netscape */

-moz-opacity: 0.5;



/* Safari 1.x */

-khtml-opacity: 0.5;



/* Good browsers */

opacity: 0.5;

}

Source: https://css-tricks.com/snippets/css/cross-browser-opacity/

You could also use a rgba or hsla color on your header instead of using an overlay. I think it would be smarter.

[GAtkins]

Is neuronal misspelled?

[zethos]

It was misspelled, thanks : )

I used the opacity code from above but still nothing, any ideas what I’m doing wrong?

#gray {
position:absolute;
right:0px;
top:0px;
width:100%;
background-color: #000000;
border-bottom: 2px solid #FFFFFF;

/* IE 8 */
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=40)”;

/* IE 5-7 */
filter: alpha(opacity=40);

/* Netscape */
-moz-opacity: 0.4;

/* Safari 1.x */
-khtml-opacity: 0.4;

/* Good browsers */
opacity: 0.4;
}

[matt_sanford]

RGBA is the best way to go. https://css-tricks.com/rgba-browser-support/

[Kitty Giraudel]

What browser are you trying on? And more importantly, what are you trying to do?

I’m pretty sure there is no problem with opacity, but you may apply it to the wrong element or something.

[zethos]

I think it’s figured out. Thanks for the help guys.

[Author]

Posts