iframes and window resizing

[nop86]

I'm having trouble with iframes code when dealing with different window sizes. The iframe is 'inside' an image. What happens is, when for instance I minimize my window, the text stays in the same position but the image gets compressed as per window size. What should I do?

THe code is:

<base target="innermain">
<div id="ipain" style="position:absolute;bottom:0px;top:0px;right:390px">

<img src="ipain.jpg" width="450" height="570"></div>

<iframe name="innermain" allowtransparency="true" width="421" height="556" style="position: absolute; top:14px; left:208px" border-style: solid; border-width: 0" border="0" frameborder="0" src="text.html">
Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>

<div id="content" style="position:absolute;bottom:0px;top:0px;right:0px;height:504px">
<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td><img src="indexwork41-2.jpg" width="51" height="290" border="0"></td>
<td><img src="indexwork41-3.jpg" width="166" height="290" border="0"></td>
<td><img src="indexwork41-4.jpg" width="174" height="290" border="0"></td>
</tr>
<tr>

<td><img src="indexwork42-2.jpg" width="51" height="121" border="0"></td>
<td><a href=".html" onmouseover="swapImage( 'image1' , 'link1on.jpg' )" onmouseout="swapImage( 'image1' , 'link1.jpg' )">
<img src="link1.jpg" width="166" height="121" border="0" name="image1"></A></td>
<td><a href=".html" onmouseover="swapImage( 'image2' , 'link2on.jpg' )" onmouseout="swapImage( 'image2' , 'link2.jpg' )"><img src="link2.jpg" width="174" height="121" border="0" name="image2"></a></td>
</tr>
<tr>

<td><img src="indexwork43-2.jpg" width="51" height="159" border="0"></td>
<td><a href=".html" onmouseover="swapImage( 'image3' , 'link3on.jpg' )" onmouseout="swapImage( 'image3' , 'link3.jpg' )"><img src="link3.jpg" width="166" height="159" border="0" name="image3"></a></td>
<td><a href=".html" onmouseover="swapImage( 'image4' , 'link4on.jpg' )" onmouseout="swapImage( 'image4' , 'link4.jpg' )"><img src="link4.jpg" width="174" height="159" border="0" name="image4"></td>
</tr>
</table>
</div>

I would really really appreciate some help.. Thanks

[tedster]

Hello nop86, and welcome to the forums.

At a guess, your problem comes from positioning the iframe with an absolute position - which takes it out of the normal flow of the document. I would trying slicing the image and positioning the pieces "around" the iframe, letting everything flow naturally instead of using absolute position.

It's definitely more of a CSS thing than an HTML thing. If we can't fix it here, you could try over in the CSS forum [webmasterworld.com].