Iframes

[halvorsen]

I have two adjacent iframes (iframe1 and iframe2) on my main page. Iframe1 references an image from file1, and iframe2 references an image from file2. The image in file 1 is the left portion of a picture while the image in file2 is the right portion of the same picture. When displayed, I want the picture to appear as one complete picture. Unfortunately, there is a small space between the two halves of the image when I view it in a browser. I've tried setting borders, frameborders, margins, framespacing, etc to zero, but nothing seems to help. Any ideas what might be wrong? Below is the coding for iframe1:<iframe src="subnavigation.htm" name="subnavigation" width="150" height="339" framespacing="0" hspace="0" vspace="0" frameborder="0" border="0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>Your guidance would be much appreciated. Thanks.

[F-Man]

Go to your page with the image, and add this CSS in the head:

<style type="text/css">body {   margin: 0;}</style>

[halvorsen]

Thanks for responding. Unfortunately, that didn't fix the gap between the iframes either. Any other suggestions?

[pulpfiction]

HiI am not pretty sure if this would fix ur problem, but no harm trying. try changing(reduce) the width, such that it is equal to the size of the image. the white space is bcos of the width being more than the size of the image..................

[aspnetguy]

on the page witht he iframes put this in the <style></style> or external stylesheet

	iframe{margin:0px}

[Skemcin]

<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="top"><iframe src="frame2.htm" name="subnavigation" width="150" height="339" framespacing="0" hspace="0" vspace="0" frameborder="0" border="0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scrolling="no" /><br /></td><td valign="top"><iframe src="frame2.htm" name="subnavigation" width="150" height="339" framespacing="0" hspace="0" vspace="0" frameborder="0" border="0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scrolling="no" /><br /></td></tr></table>

[halvorsen]

Skemcin's code seems to have solved the problem with the gap between the adjacent iframes, but now I can't seem to add anything above or below the iframes. When I do, the iframe coding generates a line break (which the br tag is supposed to do, I guess). Any ideas out there? The current code looks like this:

<table width="800" cellpadding="0" cellspacing="0" border="0">    <tr>       <td valign="top"> <iframe src="subnavigation.htm" name="subnavigation" width="150" height="339" framespacing="0" frameborder="0" scrolling="no" /><br />      </td>      <td valign="top"> <iframe src="content.htm" name="content" width="550" height="339" framespacing="0" frameborder="0" scrolling="no" /><br />      </td>    </tr></table>

[Skemcin]

Try this:

<table width="800" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top">Content above the subnavigation iframe<br /><br /><iframe src="subnavigation.htm" name="subnavigation" width="150" height="339" framespacing="0" frameborder="0" scrolling="no" /><br /><br />Content below the subnavigation iframe<br /></td><td valign="top">Content above the content iframe<br /><br /><iframe src="content.htm" name="content" width="550" height="339" framespacing="0" frameborder="0" scrolling="no" /><br /><br />Content below the content iframe<br /></td></tr></table>

However, if your content on top of either side is longer than the other, then your <iframes> will not start at teh same point. to get around this, just add a row at the top with two columns and/or a row at the bottom.