Iframe width and height in %

[ruchir123]

Hello,

If I measure height and width in % instead of pixels then it does not work in firefox. It only ends up displaying only small region of iframe instead of specified size.

But this works perfectly fine on IE.

Below is the code.

<iframe id="theFrame" name="iframes" src="http://www.abc.org" align="top" height="94%" width="96%"></iframe>

Thanks,
Ruchir

[TheTeenScripter]

<iframe id="theFrame" name="iframes" src="http://www.abc.org" align="top" Style="height:94%; width:96%;"></iframe>

that should work

[Major Payne]

As answered in other forum you posted in:

Maybe this will work better for you:

<div style="margin: 0 auto; width:96%; height:YYpx;"><object type="text/html" data="http://www.abc.org"" style="width:100%; height:100%; margin:1%;"></object></div>Set div height to height required.

[ruchir123]

Thank you for your post TheTeenScripter AND Major Payne.

Major Payne:

I am using this iframe as part of on change trigger, so how can I replace iframe code with your code and yet preserve the logic of onchange? I am sorry but I am novice in HTML and going through learn as you go approach.

Below is the code: tha dynamically invokes the iframe.


<SELECT ONCHANGE="if (window.frames && window.frames.iframes) {
window.frames.iframes.location.href =
this.options[this.selectedIndex].value;
}"

TheTeenScripter:

I tried your suggestion but still no luck:(

Regards
Ruchir

[Major Payne]

I am using this iframe as part of on change trigger, so how can I replace iframe code with your code and yet preserve the logic of onchange? I am sorry but I am novice in HTML and going through learn as you go approach.Well, this comes to pass when all the info is not known aheaD OF TIME. possibly try giving the div or object tag a name and calling it with the script. Really, you should designate the height with some fix dimension anyway.

[TheTeenScripter]

<div style="margin: 0 auto; width:96%; height:94%;" ID="objchg"><object type="text/html" data="about:blank" style="width:100%; height:100%; margin:1%;"></object></div>
<select onchange="goHere(this.value)">
<option value="http://www.site1.com/">Site 1</option>
<option value="http://www.site2.com/">Site 2</option>
<option value="http://www.site3.com/">Site 3</option>
<option value="http://www.site4.com/">Site 4</option>
<option value="http://www.site5.com/">Site 5</option>
<option value="http://www.site6.com/">Site 6</option>
</select>
<script>
function goHere(where) { document.getElementById('objchg').innerHTML='<object type="text/html" data="'+where+'" style="width:100%; height:100%; margin:1%;"></object>';
</script>