Iframe Help! (Please!)

[HeatherD]

Hey, I really need some help. I've made a fanlisting with iframes, I'm REALLY new to this but I think I've managed to do it without much trouble. It's fine when I view it in the maximized window but when I restore it down, the text moves to the right. Is there any way I can keep it in the same place when I view it in both?

Here is my website: http://www.flowersintheshade.net/lilkim

Thanks for any help!

[jscheuer1]

Put this in the head (just before the </head> tag) or add its declarations (without the opening and closing style tags) to the end of your external stylesheet:


<style type="text/css">
#horizon
{
position: absolute;
top: 395px;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
}

#content
{
margin-left: -155px;
position: absolute;
left: 50%;
}
</style>

The number in red above may be used to tweak the left/right positioning of the iframe. Use this in place of your current iframe markup:


<div id="horizon">
<div id="content">
<iframe src="home.html" name="frame" height="456" width="329" allowtransparency="true" frameborder="0" style="filter: chroma(color=#C2CBCF);">
</div></div>


You might want to set the background color of the body to transparent or #29a39f in the css.css file as in all browsers other than IE, it shows opaque on the top page. If this messes up the IE chroma thing, an IE only background color can be maintained.

[HeatherD]

Thankyou so much! I did exactly as you said and it's working brilliantly now! Thanks again.

I'm not sure what you mean about the background colour is css, I changed them to both transparent and #29a39f but they messed with the chroma like you said...


an IE only background color can be maintained.
How?

[jscheuer1]

Since I posted that, I did a little more investigation of your markup. Because it is very involved to duplicate things here locally I cannot be 100% sure this will work but, here goes, it is worth a shot. In css.css change the background color to #29a39f:


body
{
background-color: #29a39f;
font-family:Tahoma,Verdana;
font-size:9px;
color: #FFFFFF;
cursor: default;

scrollbar-face-color: #24A39F;
scrollbar-shadow-color: #24A39F;
scrollbar-base-color: #24A39F;
scrollbar-highlight-color: #24A39F;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #f4e0ec;
scrollbar-track-color: #24A39F;
scrollbar-arrow-color: #A9DAD9;
}

On the main page make the iframe:


<iframe src="home.html" name="frame" height="456" width="320" allowtransparency="true" frameborder="0">

This should work out for all browsers. That chroma thing is an IE only filter and should not be required if the pages' background in the iframe match the color of the background image that they get displayed over and the width of the iframe fits the area it is designated for.

[HeatherD]

Thanks! I changed the background colour to #29a39f and it looks fine for me, does it look ok to you? I changed the width of the iframe too but it messed it up so I changed it back... is that ok?

[jscheuer1]

Yes, it looks very good now in Opera, FF and IE. My change to the iframe width was using the -155px for the #content left margin. Since you changed that, the width you are using for the iframe is fine. Those two things are related to each other (width and margin) for the final look and placement of the element (iframe in this case). You really should no longer need:


style="filter: chroma(color=#C2CBCF);"

on the iframe, it doesn't mess up the appearance but does add slightly to the load time for the page.

[HeatherD]

Thankyou! I took the chroma away and it looks great. Thanks so much for all your help, you're a star! http://www.dynamicdrive.com/forums/images/smilies/biggrin.gif