14 replies [Last post]
grantmx
Offline
newbie
Last seen: 6 years 31 weeks ago
Joined: 2008-02-13
Posts: 7
Points: 0

Does any body know the hack to get background-color:transparent; to work in IE? I got it to work in Firefox and Safari, but IE isn't playing nice. Thanks!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Not enough information. Can

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

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

grantmx
Offline
newbie
Last seen: 6 years 31 weeks ago
Joined: 2008-02-13
Posts: 7
Points: 0

Sorry about that. Let me

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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Have you tried background:

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

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

grantmx
Offline
newbie
Last seen: 6 years 31 weeks ago
Joined: 2008-02-13
Posts: 7
Points: 0

Yes, I've tried that too. I

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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Do you need to set the

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

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

grantmx
Offline
newbie
Last seen: 6 years 31 weeks ago
Joined: 2008-02-13
Posts: 7
Points: 0

For every element in the CSS

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).

grantmx
Offline
newbie
Last seen: 6 years 31 weeks ago
Joined: 2008-02-13
Posts: 7
Points: 0

Nothing huh?

Nothing huh? :?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Not from me; 'fraid not.

Not from me; 'fraid not.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Wicked
Wicked's picture
Offline
newbie
Finland
Last seen: 6 years 31 weeks ago
Finland
Timezone: GMT+2
Joined: 2008-03-11
Posts: 3
Points: 0

This is probably not a css

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.

grantmx
Offline
newbie
Last seen: 6 years 31 weeks ago
Joined: 2008-02-13
Posts: 7
Points: 0

Hmmm. Interesting. Could

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?

Wicked
Wicked's picture
Offline
newbie
Finland
Last seen: 6 years 31 weeks ago
Finland
Timezone: GMT+2
Joined: 2008-03-11
Posts: 3
Points: 0

My mistake, I meant

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 Tongue

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

grantmx
Offline
newbie
Last seen: 6 years 31 weeks ago
Joined: 2008-02-13
Posts: 7
Points: 0

New to CSScreator forums;

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.

Wicked
Wicked's picture
Offline
newbie
Finland
Last seen: 6 years 31 weeks ago
Finland
Timezone: GMT+2
Joined: 2008-03-11
Posts: 3
Points: 0

Haven't checked on IE6, but

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

dougwig
Offline
newbie
Cambridge, MA
Last seen: 5 years 35 weeks ago
Cambridge, MA
Joined: 2009-02-19
Posts: 1
Points: 0

For transparent IFRAMES in IE7...

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';