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>
<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
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 */
}
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.
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
Removing CSS opacity styles from inner divs
Reply With Quote
Bookmarks