How to Adjust the Size of iFrame in Firefox
Mozilla's Firefox browser has the capability to display an iframe within your content but the problem is that Firefox does not honor the 100 percent width and height attributes you can set in the iframe tag. These dimensions are typically used when you do not want the usual appearance of an inline frame but instead need the embedded website to show up as a whole page on your site. Using Cascading Style Sheets (CSS) you can create rules that adjust the size of the iframe in Firefox.
Instructions
-
-
1
Launch your text editor program and bring up the website document that contains the iframe.
-
2
Position your cursor before the closing </head> tag and type this CSS:
<style type="text/css">
html, body, div, iframe { }
iframe { }
</style>By creating a rule for all of the main HTML elements, such as the html and body, in addition to the iframe you ensure Firefox follows your width and height specifications.
-
-
3
Position your cursor in the "html, body, div, iframe" rule and enter "margin: 0px; padding:0px; height:100%;" like so:
html, body, div, iframe { margin:0px; padding: 0px; height: 100%; }This style forces Firefox to adjust the size of your iframe.
-
4
Place your cursor in the iframe rule and type "display: block; width: 100%; border: none;" to support the height specification in Firefox. Your complete CSS now looks like this:
<style type="text/css">
html, body, div, iframe { margin:0px; padding: 0px; height: 100%; }
iframe { display: block; width: 100%; border: none; }
</style> -
5
Type an opening "<div>" tag before the HTML iframe code and enter a closing "</div>" after the "</iframe>" tag. To illustrate:
<div>
<iframe src="http://www.site.com">
<p>This is your text.</p>
</iframe>
</div> -
6
Type "width=" and "height=" in the iframe tag and enter "100%" for both entries. Your complete HTML iframe code is now the following:
<div>
<iframe src="http://www.site.com" width="100%" height="100%">
<p>This is your text.</p>
</iframe>
</div> -
7
Save your file.
-
1