Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Old 08-23-2007, 01:43 PM transparency issue
Extreme Talker

Posts: 182
Trades: 0
I am having trouble with the css of a modal box I am making. The oBox_content div is for some reason inheriting the transparency of the oBox_overlay div. I'm sure there is something wrong with my code so if you have any ideas...

My HTML:
HTML Code:
<div id="oBox_overlay" style="display:block;">
	<div id="oBox_content">
		<!-- content goes here -->
	</div>
</div>
My CSS:
Code:
#oBox_overlay
{
	position: fixed;
	z-index:100;
	top: 0px;
	left: 0px;
	background-color:#000;
	filter:alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
	height:100%;
	width:100%;
}


#oBox_content
{
	position:absolute;
	width:450px;
	min-height:250px;
	top:20%;
	left:30%;
	background-color:#FFFFFF;
	border:3px solid #666666;
	padding:10px;
	z-index:100;
	filter:alpha(opacity=100);
	-moz-opacity: 1.00;
	opacity: 1.00;
}
thanks guys!
bhgchris is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 08-23-2007, 10:14 PM Re: transparency issue
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Not sure what you're trying to achieve there. Position:fixed is not supported by IE, and there only a few reasons to use position:absolute too. Since you've got them both set to a z-index of 100, they are going to occupy the same 'layer'.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 08-24-2007, 12:08 AM Re: transparency issue
vangogh's Avatar
Post Impressionist

Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
As far as the transparency is concerned I don't think you're doing anything wrong. It's unfortunately the way transparency works at the moment I believe.

When you set transparency on an element everything inside that element inherits the same transparency. I don't believe you can override it either.

Kind of makes transparency a lot less useful than it could be.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 08-24-2007, 01:17 PM Re: transparency issue
Extreme Talker

Posts: 182
Trades: 0
LadynRed:
position:fixed seems to be recognized by ie 7 at least. I changed it to position:absolute anyway though and nothing changed.

I am trying to achieve a simple modal box. oBox_overlay covers the whole browser with a opaque black layer. oBox_content sits right in the center with a white background and displays any alerts or messages. The problem I am having is that the white background of oBox_content is opaque as well.

As far as positioning goes, everything seems to be cross-browser compatible.

If you have time, you should be able to simply copy and paste the code I posted into an html file with some content in the oBox_content div and see what I'm talking about.
bhgchris is offline
Reply With Quote
View Public Profile
 
Old 08-24-2007, 03:01 PM Re: transparency issue
Extreme Talker

Posts: 182
Trades: 0
Problem solved! I simply added and rearranged the divs

Here is a simplified version of my new code:

The HTML:
HTML Code:
<div id="oBox" style="display:block;">

     <div id="oBox_overlay"><!--opaque overlay--></div>

     <div id="oBox_content"><!--content here--></div>

</div>
The CSS:
Code:
#oBox_overlay {
	position: absolute;
	top: 0px;
	left: 0px;
	background-color:#000;
	filter:alpha(opacity=90);
	-moz-opacity: 0.90;
	opacity: 0.90;
	height:100%;
	width:100%;
}

#oBox_content {
	position:absolute;
	width:450px;
	min-height:250px;
	top:20%;
	left:30%;
	background-color:#FFFFFF;
	border:3px solid #666666;
	padding:10px;
}

#oBox
{
	
	
}
bhgchris is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to transparency issue
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.61334 seconds with 12 queries