Adding non-standard attribute to iframe without using JS for IE-only 1

[BillyRayPreachersSon]

All,

A page we're developing has several ad banners on it, all contained within their own IFRAMEs (so that they can be refreshed programatically).

The IFRAMEs are contained within a DIV, and the DIV has a background on it that looks like a picture frame. This gives the nice effect of the ad banners being centred within a picture frame.

However, to get the picture frame to show in IE 6 & 7, a non-standard attribute, "allowTransparency", needs to be set on the IFRAMEs. This causes our page validation to fail.

We changed the code so that for IE 6 & 7, the attribute was added after page-load using JavaScript. However, with JavaScript switched off, the effect is no longer visible.

We thought about using conditional comments, but these cannot be used inside an element tag. We also thought about having multiple IFRAMEs when IE was detected (using conditional comments), and then hiding the first using CSS. Unfortunately, we cannot do this as it skews the ad impressions (marketing people like a level playing field).

Can anyone think of a way of delivering the "allowTransparency" attribute to the IFRAMEs without using JavaScript, and without breaking validation?

I'm beginning to think that server-side browser detection is the only way, but I'm really wanting to avoid that if I possibly can.

Thanks!

Dan





Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[vacunita]

Really must it be that complex? And using Iframes can really hinder accessibility in certain browsers.

You could use nested divs, and have the frame be the background of the outer div, and place the Ad in the inner div. If you must use iframes, then make the iframe's background your frame image, and put a centered div inside it that will contain the AD.





----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[BillyRayPreachersSon]

Yes, it must, unfortunately. There are two factors that CANNOT change:

1. The IFRAMEs must be present to allow refreshing of the banner ads programatically. This cannot be done without IFRAMEs, AFAIK, given we have no control whatsoever over the source delivered by the ad partners.

2. The IFRAMEs must be transparent, so that the page-level background image shows through.

You can have a look at the site here to see why the IFRAMEs need to be transparent:

http://beta.skyshowbiz.com/

Basically, the curtain background needs to show through the frame pattern. Even if we moved the black frames inside the IFRAMEs, you'd still need them to be transparent to see the background picture through them.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[vacunita]

I'm guessing you want the black horizontal frame with the Sky ad inside to be transparent and show the curtain background right?

Can you make the image a semi transparent PNG image maybe?


----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[ChrisHunt]

How about something like this?:

<!--[if IE]>
   <iframe src="advert.htm" allowTransparency="yes">
<![endif]-->
<!--[if ! IE]><!-->
   <iframe src="advert.htm">
<!--<![endif]-->
No ads for you, text-browser-boy!
</iframe>

It's ugly, but it should work.

Personally, I'd just swallow my pride and let the page not validate.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[BillyRayPreachersSon]

Chris,

That's genius. I've been wondering for years whether it was possible to deliver different content using conditional comments, but could never work out how to stop the second set of content being delivered to IE as well.

Thanks for that - I'm definitely going to file this one away as a very handy snippet.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]