www.webdeveloper.com
Results 1 to 6 of 6

Thread: Removing CSS opacity styles from inner divs

  1. #1
    Join Date
    Jul 2010
    Posts
    25

    Angry Removing CSS opacity styles from inner divs

    I have created a background image(backgroundImage) using a div with an opacity. The backgroundImage div goes in the allservices div which too is done. put simply within the allservices container there is a background image, however, within the allservices div there are four sub categories(resid, commoff, stud, and colldeliv) which I don't want any opacity in. Are there any ways of removing the opacity effect from these sub categories. The only way i can think of think at the moment is using jquery's remove class. I know this can be done when using images, you just assign the image an id but how does this operate with divs and can be done?
    Markup follows below:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title></title>

    <style type="text/css">

    html, body{margin:0; padding:0;}
    #contentcontainer{margin:0 auto; margin-top:15px; height:936px; width:915px;}
    #servicescontainer{margin-top:5px; margin-left:15px; height:926px; width:885px;}
    #allservices{margin-top:3px; margin-left:10px; height:920px; width:865px;}
    div#backgroundImage{margin-top:2.5px; background-image:url(somepicture.jpg); height:915px; width:865px; opacity:0.75; filter:alpha(opacity=75);}
    #resid{margin:0 5px 0 5px; margin-top:2.5px; height:247px; width:855px;}
    #commoff{margin:0 5px 0 5px; margin-top:5px; height:273px; width:855px;}
    #stud{margin:0 5px 0 5px; margin-top:5px; height:180px; width:855px;}
    #colldeliv{margin:0 5px 0 5px; margin-top:5px; height:200px; width:855px;}
    #infobox{margin-left:22px; padding-top:20px; height:100px; width:865px;}
    p.sub-title{font-family:"Lucida Calligraphy",Times,serif; font-style:italic; font-size:16px;}
    p.contenttext{padding-left:5.5px; padding-right:5.5px; font-family:Arial,Helvetica,sans-serif; font-size:13px;}

    </style>

    </head>
    <body>

    <div id="contentcontainer">
    <div id="servicescontainer">
    <div id="allservices">
    <div id="backgroundImage">

    <div id="resid">
    <center><p class="sub-title">this div's title</p></center>
    <p class="contenttext">
    Some random text for this div
    </p>
    </div>

    <div id="commoff">
    <center><p class="sub-title">this div's title</p></center>
    <p class="contenttext">
    Some random text for this div
    </p>
    </div>

    <div id="stud">
    <center><p class="sub-title">this div's title</p></center>
    <p class="contenttext">
    Some random text for this div
    </p>
    </div>

    <div id="colldeliv">
    <center><p class="sub-title">this div's title</p></center>
    <p class="contenttext">
    Some random text for this div
    </div>

    </div> /*Closing div for the backgroundImage*/

    </div> /*Closing div for the allservices*/
    </div> /*Closing div for the servicescontainer*/
    </div> /*Closing div for the contentcontainer*/
    </body>
    </html>

    also within the CSS style the following are underlined in red: background-image:url(somepicture.jpg), opacity, and 75. onmouseover dreamweaver says Error parsing style[Microsoft Internet Explorer 5.0], by my understanding this means those styles are not compatible with IE5. Are there any ways around this?

    Any idea, solutions, tips, and point outs of errors are much appreciated

  2. #2
    Join Date
    Feb 2012
    Location
    Bokaro Steel City (Jharkhand), India!
    Posts
    194
    Incorrect use!
    HTML Code:
    div#backgroundImage{
    margin-top:2.5px; 
    background-image:url(somepicture.jpg); 
    height:915px; 
    width:865px; 
    opacity:0.75; 
    
    filter:alpha(opacity=75); /* this is wrong use */
    
    }
    Correct use:
    HTML Code:
    div#backgroundImage{
    margin-top:2.5px; 
    background-image:url(somepicture.jpg); 
    height:915px; 
    width:865px; 
    opacity:0.75; 
    
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75); /* this is correct use */
    
    }

  3. #3
    Join Date
    Feb 2012
    Location
    Bokaro Steel City (Jharkhand), India!
    Posts
    194

    Post

    I will try to solve the problem!
    Last edited by TheAliveWinner; 02-26-2012 at 11:58 PM.

  4. #4
    Join Date
    Oct 2005
    Location
    Cambridgeshire, UK
    Posts
    191
    Hi nsath,

    I experienced the same thing before and wrote about it on my blog. Sounds like it could be similar. You can find the solution here:

    http://biostall.com/only-applying-a-...rent-container

    Hope that helps Cheers
    BIOSTALL.com
    - Freelancing Services
    - Web Development Snippets, Hints and Tips

  5. #5
    Join Date
    Jul 2010
    Posts
    25
    I have already tried this before (mark up not posted here) with no prevail, I have also looked at your blog and found the following difference what you in your blog have set as div class - content, in my case what is allservices is split into four seperate div id's - resid, commoff, stud, and colldeliv. Reason for this is that each div is four a seperate category. I have even tried using the css property z-index but again nothing.

    Cheers

  6. #6
    Join Date
    Jul 2010
    Posts
    25
    BIOSTALL I just double checked over what I had done before and found out that the position property of the div class - sub-title and contenttext were not set to absolute and the div class property of the allservices div was not set at all. Anyhow, Cheers for that much appreciated

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles