background-color: transparent in IE7

Not enough information. Can we see a link to the page or all of your code?

Sorry about that. Let me explaine further.

Im using graybox to launch a special subscription page I created. This page contains a div with rounded corners using the spiffycorners technique: http://www.spiffycorners.com/.

I set the CSS property for Body on this page to {background-color:transparent;} and it works fine in Firefox, but in IE 7 the CSS doesn't render body transparent.

Here is a link to the popup page with the code I am using (hit cancel to cancel the login).
http://grantmx.com/podrunner/popup.htm

Here are screen shots to how I am using it.
http://grantmx.com/podrunner/ie7.jpg - note the extra space and square corners
http://grantmx.com/podrunner/firefox.jpg - note the rounded corners with transparent background.

The actual site it's on is off limits at the moment, as to is still being developed.

Have you tried background: none ? You might need to do the same for the HTML element too.

Yes, I've tried that too. I slapped together a working example of what I mean. Here is the link: http://grantmx.com/podrunner/test.htm

The popup url is still the same.

Do you need to set the bg-color of the iframe too?

For every element in the CSS related to the iframe I set the background-color to transparent, save the background overlay which is set to #000 (this turns semi transparent).

Nothing huh? :?

Not from me; 'fraid not.

This is probably not a css related issue.

You might have to edit the greyzone .js file so that the iframe it launches to display your content allows transparency. By setting allowtransparency to "true" somehow (this depends on how greyzone is coded, and I haven't used greyzone so far but did that modification on shadowbox).

In pure html this would be

In shadowbox it's something like this :

var content={tag:"iframe",name:"shadowbox_content",height:"100%",width:"100%",frameborder:"0",allowtransparency:"true", [...]

(note that the allowtransparency option is not present at all in the original shadowbox code)

Good luck.

Hmmm. Interesting. Could be.

Not sure about greyzone.js. I'm using greybox and am looking in the gb_scripts.js as well as the ajs.js and ajs_fx.js and don't see, var content. I do see:

var _53=["ul","li","td","tr","th","tbody","table","input","span","b","a","div","img","button","h1","h2","h3","h4","h5","h6","br","textarea","form","p","select","option","optgroup","iframe","script","center","dl","dt","dd","small","pre","i"];

But why would it work in Firefox and Safari, yet not in IE?

My mistake, I meant greybox.js not "greyzone"

The part you copy pasted isn't the part where you could do that modification.

But the problem is just that : greybox creates an iframe without the "allowtransparancy" option set to "true".
It's only a problem in IE because IE is the only one that requires that option.

You must be new here, there's a LOT of things that work perfectly in firefox, opera and Safari but don't work in IE without a lot of extra attention and tricks.... IE is garbage, any self respecting web dev knows that

EDIT : I was gonna download greybox and look at the code but their website is down. :shrug:

New to CSScreator forums; definitely not new to CSS nor the devil's spawn IE }:) ...nevertheless, since IE use accounts for 60% of my users I have no choice.

Oh, and Apparently IE actually doesn’t support or is buggy when it comes to the background-color property…http://reference.sitepoint.com/css/background-color

But when it comes to javascript, I am a total Nob.

Haven't checked on IE6, but IE7 handles "background: transparent;" just fine.

I found that you have to do two things to have IE7 iframes have a transparent background:

1) allowTransparency = "true"
2) backgroundColor = "transparent"

I was doing this via javascript like so:

var frameElem = $(id); //shorthand!
frameElem.allowTransparency = true; /* IE only */
frameElem.style.backgroundColor = 'transparent';