...

View Full Version : Opacity/filter alpha layering issue



BenR
01-09-2013, 06: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.




#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;

}





<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, 06: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 (http://nopeople.com/CSS%20tips/opacity/index.html), maybe it will help.

BenR
01-09-2013, 06: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. :o


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

BenR
01-09-2013, 07:04 PM
Revision:

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


#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, 09: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, 10:39 PM
Duplicate post - sorry

BenR
01-10-2013, 12:08 AM
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.


<!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, 01: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, 02: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




.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, 03: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, 04: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum