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!!!!

**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....

**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

part 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"> </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/dynamici...jaxcontent.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.

Thread: Iframe Positioning Issue

Thread Tools

Search Thread

Iframe Positioning Issue

Bookmarks

Bookmarks

Posting Permissions