Opacity/filter alpha layering issue

BenR · 01-09-2013, 05:00 PM

Hello and thank you for taking the time to read my question. Hopefully it is simple enough.

I am trying to create a 10% white opacity background wrapper (#header-wrapper). That much was successful. Inside the wrapper I have another tag with my text (#logo). When previewing, the text inside #logo is also at 10% opacity. Not sure as to why. I tried setting up a Z-index so #logo could be on top and maybe not have the effect applied.

Code:

#header-wrapper {
	overflow: hidden;
	height: 150px;
	background-color:white;
	opacity:0.1;
  	filter:alpha(opacity=10); /* For IE8 and earlier */
  	z-index: 1;
  
	
}

#header {
	width: 1200px;
	height: 150px;
	margin: 0 auto;
	padding: 0px 0px;
	
}

#logo {
	float: left;
	width: 310px;
	height: 150px;
	padding: 0px 0px 0px 10px;
	z-index: 2;

}

Code:

<div id="header-wrapper">
	<div id="header">
		<div id="logo">
Sample text
             </div>
	</div>
</div>

Any help or suggestions are appreciated! Thank you
-Ben

Excavator · 01-09-2013, 05:22 PM

Hello BenR,
z-index will not work on you floated #logo or your static positioned #header-wrapper, it only works on positioned elements. You will need to use absolute or relative positioning.

Look at this example of opacity, maybe it will help.

BenR · 01-09-2013, 05:51 PM

Well that was apparently an easy fix. Did not know that about float. Thank you very much! Changing the position to absolute fixed the problem.

EDIT: Fixed the problem in IE but not Chrome. See below

BenR · 01-09-2013, 06:04 PM

Revision:

Actually turns out it only worked for IE9. Chrome is still showing problems with opacity.

Code:

#header-wrapper {
	overflow: hidden;
	height: 150px;
	background-color:white;
	opacity:0.1;
	filter:alpha(opacity=10); /* For IE8 and earlier */
  	
  
	
}

#header {
	width: 1200px;
	height: 150px;
	margin: 0 auto;
	padding: 0px 0px;
	
}

#logo {
	position:absolute;
	width: 310px;
	height: 150px;
	padding: 0px 0px 0px 10px;


}

Excavator · 01-09-2013, 08:05 PM

This seems to work fine for me in IE9, 8 and 7.
Makes me think there is something wrong with code you are not showing us. Are you using a DocType?

BenR · 01-09-2013, 09:39 PM

Duplicate post - sorry

BenR · 01-09-2013, 11:08 PM

I think my last reply was chewed up. I do not see it listed.
Thank you for testing this further.

IE issues have resolved with your previous suggestion however Chrome and Firefox are now giving me the same global opacity problem.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

I'm using the standard DocType input by SharePoint designer. It was not previously on my .css page, only the .html. I've added it to the .css but did not notice any immediate changes.

Excavator · 01-10-2013, 12:46 AM

Your CSS should contain CSS only, no DocType there.

Check out the links about validation in my signature line as the snippet you've posted is invalid.

Can you link us to a test site so we can see this thing in action? I don't have Chrome installed but I might be able to figure out why FF isn't displaying what you want.

BenR · 01-10-2013, 01:30 AM

Unfortunately I don't have anything live to share. I ran my css through the validator like you suggested and found a few unrelated errors which were fixed except for the opacity which is still showing as invalidated. I'll post the entirety of the .css

Code:

.container {
    width: 1500px;
    margin: 0 auto;
}


#header-wrapper {
	overflow: hidden;
	height: 150px;
	background-color:white;
	opacity:0.1;
	filter:alpha(opacity=10); /* For IE8 and earlier */
	z-index:1;
	
	
}

#header {
	width: 1500px;
	height: 100%;
	margin: 0 auto;
	padding: 0px 0px;
	

	
}

#logo {
	position:absolute;
	width: 310px;
	height: 150px;
	padding: 0px 0px 0px 10px;
	z-index:2;


}

.logo p
  {
	margin:30px 40px;
	font-weight:bold;
	color:#000000;
 	font-family: Aparajita;
	font-size: 56px;

  }

#menu{
	height: 200px;
	padding: 0px 0px 0px 0px;
}

#banner {
	overflow: hidden;
	width: 1160px;
	margin: 20px auto 50px auto;
}

#banner .img-border {
	height: 500px;
	border: 20px solid #FFFFFF;
}


#content{
	
}

#contentframe{
	overflow: inherit;
	width: 1160px;
	height: 500px;
	margin: 20px auto 50px auto;
	padding: 5px 0;
	text-align: left;
	background-color: #f1f1f1;
	border: 20px solid #f1f1f1;
				
}

				
}

#footer {
	float: right;
	margin: 0 auto;
	padding: 50px 0px 50px 0px;
	width:95%;
}

Excavator · 01-10-2013, 02:04 AM

There are two validators. Did you check your markup?

Maybe you should take another look at that demo I linked you to. Click on the Markup/CSS links in the upper right to see how it's done.

BenR · 01-10-2013, 03:22 AM

Markup checked out fine.
I think my problem is stemming from my positioning - what's relative vs absolute. I am quite unfamiliar with how those items are used effectively.

I decided to work backwards from the example per your suggestion. Copied the css and markup from the example and changing up the design to fit the original template but not touching the opacity haha.

Seems to be working with that. I will have to play around more with why the previous attempt worked in IE but not Chrome or Firefox. If only everyone used IE.. (joking!)

Thank you for all your help! I sincerely appreciate it.