by Karen Stevenson on February 9, 2010 // Short URL

IE iFrame Insanity

After I spent THREE HOURS trying to figure out why IE insists on rendering a white background for an empty iframe, Nate pointed this little gem out to me.

IE has default values for iframes. Yes they do. And the default is to put an opaque background and an inset border on iframes that will ignore any attempt you make to change the iframe background color or border using css. So if you put 'background-color:transparent' into your css for the iframe element it will have no effect. That's right IT WILL IGNORE YOUR CSS!

To fix it you have to do this:

<iframe allowtransparency="true" frameBorder="0"></iframe>

See the documentation for this stupid behavior here

- http://msdn.microsoft.com/en-us/library/ms533072%28VS.85%29.aspx
- http://msdn.microsoft.com/en-us/library/ms533770%28VS.85%29.aspx

Comments

Travis

Class Action Suit

I'm filing a class action lawsuit against Microsoft for all the time and money developers around the world have flushed down the toilet trying to support Internet Explorer. Who's with me?

Reply

Anonymous

Every Webdeveloper

I Think every web developer in the universe is with you on that one. For every version on Internet Explorer. Remember when IE5, IE5.5 & 6 used to be the best web browsers

Reply

Anonymous

Yep!

Yes, me too. I think it would bee a good idea to include everyone who's ever used Vista or any other Microsft product.

Reply

Anonymous

can we just stop

Can we just all collectively break the web, please? We stop supporting IE. Sure you can make a car that runs on frozen kiwi's. But we will not sell frozen kiwi's at gas stations.

It will be painfull sometimes, but mainly just ugly. And people will learn. And life will get better.

Reply

seutje

oh IE, bane of our existence

heh, I remember this one, but instead of trying to figure it out for 3 hours, a quick google for "IE iframe transparency" would of undoubtedly pointed you to one of the many rather helpful pages out there.

Google is your friend, don't hate it ;)

Reply

George

ie iframe background

Even a quick Google for "ie iframe background" would have brought you the answer pretty quick. But I know from experience that in retrospective any problem is trivial once you've been pointed to the right direction.

Reply

KarenS

Right, easy to see now the

Right, easy to see now the iframe was the problem, and I would have found a solution sooner if I was looking in that direction. But I was working on some absolutely positioned iframes, and I know that IE6 has all kinds of problems around absolute positioning, so I spent my time searching for absolute position bugs because I didn't realize the iframe was the problem.

That's the problem with these bugs. You can find a solution if you know what is broken, but there are so MANY candidates for what might be broken that you may not always attack it in the right way.

And in case you wonder why in the world any self-respecting web developer would be using iframes in the first place, we were using them to wrap ads so they wouldn't slow down the page loads.

Reply

Martin

This doesn't suprise me at

This doesn't suprise me at all. Another triumphant backdraft of using the worst browser in the world.

If you think that is already a problem, wait until you want to use HTML 5 on IE, that's not going to happen and we still have to create websites and appliations double tracked.

Man, IE, what a piece of s**t.

Reply

Anonymous

Couldn't agree more (with

Couldn't agree more (with all of you)! IE is a piece of crap, and Microsoft is totally useless ! It's just so strange. All the other browsers render pretty much the same, and IE just fu%#s it all up ! Is it so difficult to make a decent IE ? Just steal the code from Firefox mr.Gates, for god's sake man !

Reply

sandra qu

If we don't build it, they must come

I am in full support of this suggestion, and think we should make it an official movement. If we don't support IE, people will be forced to seek an alternative. I think we should simply put a CSS conditional (you know, those special ones made especially for IE <!--[if IE]> If Internet Explorer doesn't work well, <a href="http://www.mozilla.com/">Download FireFox</a><![endif]--> and be done with it.

Reply

Anonymous

boycott!

I'm with you guys - let's boycott IE development!!!

*secretly pimps himself out to commercial interests that want massive browser coverage and makes a fortune*

Reply

joshmiller

Thanks

Thanks Karen. Saw this article when it was posted and you just saved me what was surely 3+ hours of research when I ran into this exact issue with Internet Explorer.

Josh

Reply

Anonymous

how?

A large percentage of people are is still using it. How do you suggest everyone "get over it"?

Reply

Anonymous

Why

Why exactly do people use iFrames. I use them sometimes when I am working within certain CMSes and need dynamic content on the fly, but when I am running on my own server, why not just use an include?

Reply

KarenS

To speed up page loads

We use iframes to wrap ads and widgets to speed up the page load. This was a site with a lot of ads and widgets being served from other domains and all the http requests were making the home page load too slowly. By moving the code that is loaded from external sites into iframes the rest of the page can load quickly and you just have an empty spot on the page for any remote requests that would have slowed the page down.

Reply

Mike

Big business is a very tricky

Big business is a very tricky thing! Sometimes it is hard to control everything though this problem couldn't be unnoticed but it remained unsolved. Well, what is the reason for it? There could be lot's of them! I've read a book about large companies (found it at rapidshare SE http://rapidpedia.com ). It is strange but the greater company becomes the more it becomes directed towards mass production where quality becomes less important than it was earlier.

Reply