Creating Dynamic iframes for IE 6 & 7, Safari 3, Firefox 2 & 3
I have found some great services on the Internet that are not only valuable but save us designers a lot of time and headache. Most often used is the very common blog site wordpress. If you are lucky enough to host your web site with ipowerweb.com, you have the option to create your very own MySQL database for Wordpress Blogging. This is how I setup this blog and I am talking to you now. Unfortunately, if you don’t have the option of setting up a MySQL database on your server or you just cannot build up the courage to go through more headaches, testing and so forth there are some options… One of the ways I get around this is to use what we call an iframe. The iframe can bring your blog to your own server at the link of your choice. It’s almost like embedding a web site within a web site. (i.e. instead of going to wordpress to get your blog, you can just create a link like www.mywebpage.com/blog and bring it to your own server)I’ve used iframes quite a few times but what always happens is the external page (from the Internet) brought into your new page (on your server) gets cut off or rather the height does not size itself correctly.I did a little research and found a few javascript codes to get around this but the best solution is to work with a little trick in CSS,I found a great tip on this web site, The best solution, that works for IE 6&7 | Safari 3 | and Firefox 2 & 3:Is the include this iframe code as a DIV inside the body of your html document, this is the page you would like to embed your web page:<div id=”iframe_wrap”><iframe scrolling=”auto” id=”iframe” name=”iframe” class=”iframe” frameborder=”0″ src=”http://yourpage.com” width=”100%” height=”100%”></iframe></div>Then, create a .css page link from this html document and insert these styles and trick expression:.iframe { height: expression(document.documentElement.clientHeight + “px”); }#iframe_wrap {position:absolute;top: 60px;left: 0;right: 0;bottom: 0;} That’s it! The job is done…Thanks for the tip guys!
Posted in Concentratedmedia
November 17th, 2008 at 4:20 pm
I’ pretty new at all this but it doesn’t seem to work for me in IE7. I believe IE6 recognized document.documentElement.clientHeight but as of IE7, I’ve read that they have gone with the more accepted use of document.body.clientHeight. Even after experimenting with the latter, I can’t get it to work with iframes containing pages from a different domain. I’m not sure if the browser has access to the DOM of another domain.