iFrames and "top of page"

[Deanna475]

Hi to all. I'm designing a site that uses an iFrame in the center of the page. Some of the content in the iFrame is long and I want to put a "Return to Top" (as in "return to top of page") at the bottom of the content. However, when I use the standard <a href="#top">Return to Top</a>, the page within the iFrame does go to the top, but my main page also jumps and re-positions itself to the center of the screen. ??? How do I code it so that only the content in the iFrame returns to the top and leaves the main page alone?

Any assistance or suggestions are greatly appreciated.

[Stoffel]

Are u working with <a name="#top">blablabla</a>?

[Deanna475]

Hi Stoffel. Yes, I tried it with the named anchor as well. Both methods result in the iframe and the main page jumping to the top of the screen (well, actually the main page jumps to the top of the iframe, regardless of where you are on the main page, if you know what I mean?).

I think it's got something to do with the "#" mark, but darned if I can find anything on the web that gives me an alternative!

[meow]

A can't reproduce this. What browser?

Anyway, I don't want to be picky but there is nothing standard about "#top". It's just the way (some) browsers handle an error. The browser goes to the top to start looking for a named anchor. There is none so it stays at the top. You could as well use #blahblah and get the same result. Use a proper named anchor. :D

[Deanna475]

Hi Meow. I did use a proper named anchor when I tried this method. Still received the same results and I *want* the iframe page to stay at the top but leave the main page alone. I'm using IE6 and if you want to see what is happening, please go to

http://www.theinspirationgallery.com/neo/neoclassic_border.htm

Scroll the iframe to the bottom, click on Return to Top and see what happens.

[meow]

Yes, I get it too.

I don't think that's what causes it but there is no <a name="top">...</a> in http://www.theinspirationgallery.com/neo/bg_faux01.htm

[Deanna475]

Hi again M. OK, I added the anchor name tag at the top just to show you that the same results are achieved, with or without it. I had tried this method yesterday and it didn't work then. It's not working now either. The main page still jumps along with the iframe page. :confused:

Maybe it's just me. Maybe I've been staring at it for so long, I can't see the obvious with the anchor name tag. If you want to check it out again to make sure I did it right, same link as in the message above. Thanks.

[meow]

No, not just you. I can reproduce it now if the main page is long enough. Maybe it's an IE thing? I have IE5 here. Moz and Opera 7 don't do it. Not at your page either. :confused:

[Deanna475]

Thanks for all that extra checking M. Much appreciated. Maybe it is an IE thing????

Hey M., could you tell me something .... when you checked that page in IE5, Moz and Opera 7, did the positioning of the top border between the two columns look OK to you? Meaning, is this what you saw?

http://theinspirationgallery.com/neo/border_position.jpg

If yes, what screen res are you using? I'm kinda doing an informal survey of how this page renders in various browser generations and your feedback would be most helpful since I haven't had it checked in Moz or Opera yet. Too afraid to even look at it in NS! :eek:

[meow]

1024*768, but I don't use a maxed window if I don't have too.

Uhmmm... In Moz there is no top border at all. Just a big spacer.gif. In both Opera and IE the border breaks if the window is less than around 940 pixels wide and leaves an empty gap to the left. In both Moz and Opera the bottom of the pillars start to repeat. The foot thing. In IE I don't see the foot thing, just a straight pillar. :(

[Deanna475]

Thanks M., that tells me A LOT! It tells me that this page is gonna be a nightmare to render in various browsers and at various screen resolutions. You see, in IE6, 1024x768 with a maxed window, everything fits like a glove. Start shrinking the screen or use something other than IE6 and things start to go haywire. As for Moz not even recognizing the border, I'm using CSS to position it in place with X and Y co-ordinates. I'm not that familiar with Moz, but I do know that it recognizes CSS. Must be something in the way I coded it that Moz doesn't like? Looks like I've got some thinking through to do. Thanks again for your input.

[meow]

Moz has outstanding CSS support.

Is there a reason you have put the table that holds the top border in a DIV with a negative z-index? If not, I would remove the z-index altogether. In fact, I would remove the table, but that's another story. :D

[Deanna475]

It's kind of complicated to explain, but I'm trying to design a totally interactive, customize your own web set. So yes, the border being in a z neg. index is necessary to appear behind the columns. The border is also optional. I also have a "no border" version of this web template. *S* While I know it doesn't please everyone, you'd be surprised at the amount of mail I'll receive if I *didn't* include a border graphic! If you return to that page and play around with the menu in the iframe, you can see what I mean by customizing every element and graphic on the page. If you click on a menu item and receive a page 404, it just means I haven't finished working on those pages yet.

[meow]

I'm trying to understand what you want to do... I'm afraid that you overcomplicate things terribly.

You have positioned the DIV/TABLE construct with the border absolutely for instance. Why? That's what causes it to break.

You say 'left:190'. Btw, you have an error right there. CSS requires units. IE (and probably Opera) will assume pixels. Anyway, the border will always start 190 pixels from the left edge of the window while the pillars move with the page. That doesn't work.

You use tables anyway so why not just place everything in the same table and be done with it?

[Deanna475]

I positioned it "absolute" because that's what other people more knowledgeable than I have told me to do. Why, what would you suggest instead?

And if you think the solution to place a repeating border across the top, between two columns and *behind* the two columns is complicated, you should have seen what the other suggestions looked like. And I can't place everything in the same table and be done with it because the column tops, pillars and base are all interchangeable on a mouseover. The border also can be image swapped on a mouseover, I just haven't gotten that far in working on my pages. Go back to the page, click on "columns" in the iframe menu and mouse over a couple of the thumbnails. You'll see what I mean.

[meow]

Well, when you position something absolutely it won't move. That's what you see the effect of.

If you have to do it in this mix of tables and CSS layout try this instead. Take away that whole DIV-TABLE thing with the border image and replace it with this (may god forgive me):

<div align="center">
<div id="border"></div>
</div>

Then add this to your CSS:

#border { width: 650px; height: 140px;
background: url(column3_default_bord.gif);
position: relative; top: 140px; z-index: -1;
margin-left: 70px }


I'm not sure about the width there. You may have to adjust it,

[meow]

Don't do it! It was too ugly for anything else than IE. :D

[Deanna475]

Okay! I just about had it right too! However, your example taught me the difference between "absolute" and "relative" in CSS coding. So all was not lost. :thumbsup:

I'm also working on an entirely coded CSS version of this project although I already foresee some glitches, like how to make the relevant images swap. Also, the person who is trying to help me with this also positioned everything "absolute". So far, it's looking like this:

http://www.theinspirationgallery.com/neo/neoclassic_border_css.htm

I still have to add the base and centre it, but otherwise, the structure is there. Just how the hell to make it interactive from the iframe contents? <sigh>

[Deanna475]

OK, M., here's a thought: If I follow through with this complete CSS layout and ditch the tables completely *and* find a way to make the columns interchangeable like I had them before ....... then how would I code it so that everything is positioned relative to the centre of the page and no matter what screen res a visitor uses, it will always position itself accordingly (from the centre point). Does that idea have merit or am I just grasping at straws?