Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jan 2013
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Opacity/filter alpha layering issue

    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    BenR (01-09-2013)

  • #3
    New Coder
    Join Date
    Jan 2013
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Thanks!

    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
    Last edited by BenR; 01-09-2013 at 07:12 PM.

  • #4
    New Coder
    Join Date
    Jan 2013
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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;
    
    
    }
    Last edited by BenR; 01-09-2013 at 07:12 PM.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Jan 2013
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Duplicate post - sorry
    Last edited by BenR; 01-10-2013 at 01:46 AM.

  • #7
    New Coder
    Join Date
    Jan 2013
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Jan 2013
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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%;
    }

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New Coder
    Join Date
    Jan 2013
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •