Another iframe transparency issue - with IE

[out of nowhere]

Hello

I know there are other topics on this but I have used the suggested CSS rules and I still can not achieve a transparent background to my iframe content in Internet Explorer (7 & 8 tested) although all is fine in Firefox and Safari.

I have set up a simple test page to illustrate using the standard HS iframe example. In the example CSS I have set

.highslide-wrapper, .highslide-outline {
background: none;
}
.highslide-html {
background-color: transparent;
}

In the iframe.html file I have the outline to null and given the page a background colour.

In the include-short.html file I have set

body { background-color: transparent; background: none; }

Otherwise all else is unchanged from the original HS example. it's up at http://www.outofnowhere.co.uk/hs-test/e ... frame.html

It seems that the HS window is transparent but the iframe content background stays white no matter what I try. I've been battling this all day and would really appreciate any help, thanks

[RoadRash]

To make this work with iframes in IE you need to add allowtransparency="true" inside the highslide js file (highslide-with-html.js or highslide-full.js).
Searh for this line:

Code: Select all

this.body.innerHTML += '<iframe name="hs'+ (new Date()).getTime() +'" frameborder="0" key="'+ this.key +'" '

And change it to:

Code: Select all

this.body.innerHTML += '<iframe name="hs'+ (new Date()).getTime() +'" frameborder="0" allowtransparency="true" key="'+ this.key +'" '

[out of nowhere]

Thank you so much, I really appreciate your very quick reply, that works perfectly

[torstein.honsi]

Before IE8, the allowtransparency used to be "true" by default. Then we discovered that links were clickable through the iframe expanders in IE8, and this was fixed by setting allowtransparency to "false". Just so that you know the consequence of setting it to "true".

[asidorov72]

Hello.
1. How can I set unique attributes to the iframe tag such like "id" for example?
I would like to use several modal windows with iframe, but I need they have unique ids.

2. Can you help me how I can use css file for the iframe content?

I tried to include it as usual, but it doesn't work:

Code: Select all

<script type="text/javascript" src="js/highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="js/highslide/highslide.css" />
<link rel="stylesheet" type="text/css" href="css/highslide-modal.css" />

Thank you very much!

[RoadRash]

Hi,

1. You canÔÇÖt set unique id for each iframe tag inside the Highslide iframe popup since the code that creates all iframes are the same.

2. You need to add the CSS file to the head of the page that you open inside the Highslide iframe popup, not to the head of the main page.