iFrame help!

mrk · 20 Dec 2006 at 08:52

My website i(www.robbiekhan.co.uk) s built around one iframe in the main table and all galleries are loaded in an iFrame. Version 1 of my site works fine this way as I load new images in a new sized window in accordance with the images dimensions but v2 which I have been working on for a few weeks now is near completion barring one issue.

In IE the iFrame works fine ( :rolleyes:

) but when loaded in Firefox the iFrame is squashed vertically.

I have the table set to a height os 85% of the window and the width set fixed to a set size.

The iFrame is set to 100% of the table height and the width is the same fixed length as the table width.

Here's the code I am using for the table/iframe and below are also screens of the issue I am seeing:

Code:

	<table border="1" style="border-collapse: collapse" width="898" cellspacing="1" bordercolor="#333333" id="table2" bgcolor="#171717" height="85%">
		<tr>
			<td>
			<p align="center">
			<iframe name="I1" src="index_frame.htm" height="100%" width="898" align="center" border="0" frameborder="0">
			Your browser does not support inline frames or is currently configured not to display inline frames.
			</iframe></td>
		</tr>
	</table>

In IE:

In FF:

Any help on how to resolve this issue would be awesome!

uk_viper · 20 Dec 2006 at 09:04

one thing i found is that iframe doesnt seem to like ff, if you check ie, it would probably look correct

mrk · 20 Dec 2006 at 09:11

It does look correct in IE (check the screenies

) and the iframe code isn't using anything special that is biased to IE either which was my confusion!

mrk · 20 Dec 2006 at 09:27

I fixed it!

It appears that it was my own mistake too!

I had center alignment at each div/table/paragraph and the iframe was discounting percentage height because of this. I removed each alignment one by one and replaced the whole body area with one <center></center> tag and now it works!

Here's how she looks now

Code:

<center>

<div>
	<table border="1" style="border-collapse: collapse" width="898" cellspacing="1" bordercolor="#333333" id="table2" bgcolor="#171717" height="85%">
		<tr>
			<td>
			<iframe name="I1" src="index_frame.htm" height="100%" width="100%" border="0" frameborder="0">
			Your browser does not support inline frames or is currently configured not to display inline frames.
			</iframe></td>
		</tr>
	</table>
</div>

	<font size="1" face="Arial" color="#FF6600">

	<a target="I1" href="index_frame.htm"title="Back to Main Page"><font color="#008080">HOME</font></a></font><font size="1" face="Arial" color="#808080"> 
	\\ <a target="I1" href="about.htm"title="About me & About this site"><font color="#808080">ABOUT</font></a> / 
	<a target="I1" href="contact.htm"title="Contact"><font color="#808080">CONTACT</font></a> / 
	<a target="I1" href="links.htm"title="Links"><font color="#808080">LINKS</font></a> 
	/ <a target="_blank" href="http://www.deviantart.com/"title="View my DeviantART Account and/or Journal">
	<font color="#FF6600">DEVIANTART</font></a> \\ <a target="I1" href="http://ensim3.fuitadnet.com/site/"title="Site admin use only">

	<font color="#333333">ADMIN</font></a></font></div>
</center>