Help with iframes positioned beneath slideshow.

[KCRileyGyer]

I need 2 iframes that are sitting side by side to be beneath my slideshow header but I can't seem to manage it.

My home page (http://www.kcrileygyer.com/) shows where the z-index is working with the static header image.

The test page (http://www.kcrileygyer.com/test/) shows where the same z-index is not working with the slideshow.

Any help is greatly appreciated please.

[?foru]

try something like

<iframe id="frame1" name="frame1" src="social.html" style="float:left; margin-top:-20px;"...

[KCRileyGyer]

I use an external css file so how will that coding look in the css file?

[?foru]

You can do it with an inline style by adding to what you currently have margin-top:-20px;

[KCRileyGyer]

Yes I understand that, I just like a clean html page and the ability to change all pages via the css file :). Before I posted here, this is what I have in my css file for the 2 iframes:

#frame1 { width:330px; height:680px; z-index:0; position:absolute; top:242px; float:left; overflow:auto; border:none; }
#frame2 { width:970px; height:680px; z-index:0; position:relative; top:0px; float:left; overflow:auto; border:none; }

If I remember rightly, they are the same in both the site's active css file and in the test css file. As you can see I don't want any conflict.

[?foru]

You can just add the negative margin to your css file then.

Or...
You could make the css match the page that works...this is the code from the page that works and the top:221px is different from the other css

#frame1 { width:330px; height:680px; z-index:0; position:absolute; top:221px; float:left; overflow:auto; border:none; }
#frame2 { width:670px; height:680px; z-index:0; position:relative; top:101px; float:left; overflow:auto; border:none; }


You have top:242px; in the css file that doesn't work.

[KCRileyGyer]

As for the top... yeah I know. For some reason I just can't get frame2 to line up correctly in the test directory. I would have thought that the top positioning for frame2 would be the same as frame1 but it ended up lower. After changing frame2 from 221 to 101 it aligned. But in the test, it doesn't want to no matter what I have it set to. But I haven't tried the negative positioning so I'll try that.

Ahhh... I finally see what you mean. Yeah, after adding in the slideshow, I had to adjust the top positioning to get it right. Now it's just getting the frames to sit underneath the slideshow that I need to achieve :).

I'll give your suggestion a try since, so far, nothing is working. I'll post my results later :)

[KCRileyGyer]

Okay, test directory has been updated. Thank you so much for helping me get frame2 in line with frame1.

Now, I just need help in having the slideshow sit on top of the overlapping iframes instead of under it. Any suggestions?

I did respond to your post above but it didn't post for some reason. Anyway... Yes, the top positioning turned out different after I added the slideshow. I forgot about that, sorry. And now, with the update to the test directory, they are different again.

[djr33]

Moderator's note: we have an automated spam filter that does a good job keeping the forum protected from spam-- but once in a while it catches a legitimate message. In that case one of us will approve it as soon as we see it.

[KCRileyGyer]

Thanks djr33. Being new here, it's taking me a bit to work out how all that is working when I post :)

[?foru]

My reply from last night must have been caught as well. Have you tried linking directly to the css file that works?

kcrileygyer.com/akcrg.css or /akcrg.css in your file in the /test/ directory.

[KCRileyGyer]

I link to a modified version of the original. I can't use the original because they overall width has changed from 1000 to 13000 and the header image in the test is 2 pieces instead of one. But what I'll do, is I'll modify the test one again by placing the positionings the same as the original. Widths and Heights have to stay as they are.

Oh, I've uploaded an updated version of the test pages so you can see everything but the z-index is working.

[KCRileyGyer]

Okay, I have updated the css file so it is the same other than the points mentioned above. From #frame2 I removed the margin-top:-45px; as that is the only real difference between the 2 css files. The z-index's just aren't working in the test version and I don't know why.

the iframes are supposed to overlap the bottom of the slideshow but they are supposed to be behind the slideshow so it looks like the scrollable information disappears under the slideshow.

[KCRileyGyer]

Hi, just letting you know that I have solved the issue by placing the header images inside its own table then having that table inside the one that houses the iframes. After which I applied the z-index to the header table. The fix has been uploaded to the test site. Thank you for the help. I so do appreciate it :)

http://www.kcrileygyer.com/test/