Log in

View Full Version : Iframe Positioning Issue


allielopez
02-02-2010, 10:01 PM
Hi...

I was trying to use css to position some Iframes but I have a bit of an issue.


1.) How can I get this to work in IE? It shows up fine in Firefox & Safari.

http://www.sunbriteapartments.com/reserve/weekly.html


2.) I can't even get this one to look good in anything but Firefox. Can someone help?:

http://www.sunbriteapartments.com/reserve/cancel.html


I'm willing to try another way if there is one..maybe Javascript?

Thank you!!!! :confused:
simcomedia
02-03-2010, 12:19 AM
Try wrapping the iframe in a div:

<div id="iframewrapper">

<iframe name='iframe1' id="iframe1" src="empty.htm" frameborder="0" border="0" cellspacing="0" style="border-style: none;width: 100%; height: 120px;"></iframe>

</div>

and apply your CSS to the div for placement on the page.
allielopez
02-03-2010, 01:54 AM
Thanks....almost got it....

For some reason though the top margin doesn't want to take....:confused:
simcomedia
02-03-2010, 06:24 PM
top margin.... of? the div? the iframe? include your code so we can see.
allielopez
02-03-2010, 06:38 PM
Sure...sorry about that. Ideally I only want the attached jpg http://www.sunbriteapartments.com/screenshot_01.jpgpart to show:

http://www.sunbriteapartments.com/reserve/cancel.html


Here it goes:


CSS:

<style type="text/css">
#iframewrapper
{
width:560px;
height:480px;
overflow:hidden;
position:relative;
left:57px;
}

#inneriframe
{
position:absolute;
top:-435px;
left:218px;
width:500px;
height:690px;
}
</style>

<BODY BGCOLOR="#FEF9EA" TEXT="#000000" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 NOF="(MB=(ZeroMargins, 0, 0, 0, 0), L=(UntitledLayout, 451, 381))">
<table width="27%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td colspan="3">&nbsp;</td>
</tr>
<tr>
<td><img src="../img/spacer.gif" alt="Sunbrite" width="23" height="10"></td>
<td colspan="2" bgcolor="#34bda1" style="border-left:solid; border-color:#C7BD7F; border-width:1px; border-top:solid; border-color:#000000; border-width:2px; border-right:solid; border-width:2px; border-bottom:solid; border-color:#C7BD7F; border-width:1px; "><div align="center"><img src="../img/sunbrite_logo.jpg" alt="Sunbrite" width="220" height="60"></div></td>
</tr>
<tr>
<td colspan="3">

<div id="iframewrapper">

<iframe name='iframe1' id="iframe1" src="http://www.secure-res.com/res/vn3/modify.aspx?mps=sbg" frameborder="0" border="0" cellspacing="0" style="border-style: none;width: 404px; height: 320px;top:-435px;"></iframe>

</div>

</td>
</tr>
<tr>
<td colspan="3"><div align="center" class="style3"><img src="../img/spacer.gif" alt="Sunbrite" width="40" height="1"><a href="cancel.html" title="Weekly Rentals" class="style3" onClick="dpSmartLink('cancel.html','newWin',550,700,'900:520','sc');return document.MM_returnValue">Cancel Reservations</a> | Travel Agents</div></td>
</tr>
</table>
</BODY>
simcomedia
02-05-2010, 04:45 PM
Not sure why you want to use an iframe, you should just use the ajax script here:

http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

It will summon your external content right into a div element that you can style easier than you can the iframe. Basically accomplishes the same thing but much easier. Plus, you can have links that summon other stuff into the same spot.
allielopez
02-05-2010, 05:34 PM
Oohhh..thanks!!! Great tip!!!


Actually, didn't work for me. I am trying to load an external url and this seems to work only if the page is hosted on your server.