CSS Codes
CSS Layouts
View RSS Feed

molendijk

Stretching an iframe or an object with pixel precision

Rating: 5 votes, 2.80 average.
3 Comments
by
molendijk
, 06-17-2010 at 09:35 PM (45704 Views)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
</head>

<body style="background: sienna">

<div style="position: absolute; left:60px; top: 60px; right: 60px; bottom: 60px; border: 1px solid black">
<iframe frameborder="0" src="http://google.com" style="position: absolute; width: 100%; height: 100%; "></iframe>
</div>

<!--[if lt IE 7]>
<div style="position: absolute; left:60px; top: 60px; ">
<iframe frameborder="0" src="http://google.com" style="position: absolute; width: expression(document.documentElement.clientWidth-60-60+'px'); height: expression(document.documentElement.clientHeight-60-60+'px'); border: 1px solid black "></iframe>
</div>
<![endif]-->

</body>

</html>
Works also with an object. I got the idea from http://www.alistapart.com/articles/c...olutepositions
===
Arie.

Submit "Stretching an iframe or an object with pixel precision" to del.icio.us Submit "Stretching an iframe or an object with pixel precision" to StumbleUpon Submit "Stretching an iframe or an object with pixel precision" to Google Submit "Stretching an iframe or an object with pixel precision" to Digg

Updated 06-17-2010 at 09:45 PM by molendijk

Categories
CSS related

Comments

  1. molendijk's Avatar
    It's better to post your question here.
    ===
    Arie.
  2. mapleleaf's Avatar
    This is my first post here in the forums and will not be my last!

    This is a great article, iframe pixel precision and it solved an issue that I had.

    In the developing of a web site and using dhtmlwindow, I wanted to use a variable for the viewport of the browsers(I am testing the web site with IE8, FF3.6.8/4.0b4,Opera 10.61, chrome 7.0, avant and Maxthon), it did not work when passing the viewport variables to the function.
    Well it did work on some but not all browser. This had me stumped and I knew the solution is a simple one; too often the simple solutions escape.
    Every page on the web site is W3C validated for xhtml1.1, CSS3, WCAGv2 AAA and section 508 BUT this really stumped me.

    I decided to register at DD having gone a multiple number of times over the years to DD for reference etc.

    In reading the article on iframe pixel precision, the light came on and it worked for all browser type that I am testing the web site with; namely not using the viewport variables BUT using 100% for the width and the height. WOW, alll browsers work.

    Here is how I use the dhtmlwindow function:

    dhtmlwindow.open("ajaxbox", "iframe", ""+a+"", ""+b+"", "width=100%,height=100%,resize=0");

    which btw does also work at the resolutions of 1024x768 and 1280x1024 that I am optimizing the web site for.

    Bedankt

    btw, I was on the beta team in the development of JavaScript by Netscape 1995-1998; becmae their JavaScript Developer's Champion in 1997; moderator for the developer and user javascriot forums AND had the 1st FAQ on JavaScript on the internet on Netscape's web site in 1997.

    tot ziens
  3. molendijk's Avatar
    Quote Originally Posted by mapleleaf
    In reading the article on iframe pixel precision, the light came on and it worked for all browser type that I am testing the web site with; namely not using the viewport variables BUT using 100% for the width and the height. WOW, alll browsers work.
    I'm glad this helped you out.
    ===
    Tot ziens, Arie.