iFrame not lining up properly

[Kimintiri]

I have started to overhaul an existing code, and I am inserting an iFrame into the code. Everything is working, except there is a slight disjoint with the frame, and it is triggering a horizontal scroll. I have tried everything that I can think of. Please advise!

Site (http://www.scorchedsand.net/Hawthorn/#)

[Beverleyh]

You have a few options;

1. Make the table container of the main page wider

2. Make the table container of the inner/iframed page narrower

(the table width on both pages is 870px so you cant put one inside the other without them both competing for extra width and creating a scrollbar)

3. Disable horizontal scrollbars in the inner/iframed page with overflow-x:hidden; on the body tag

4. Scrap iframes and tables altogether and use either a PHP or SSI include, along with a div-based layout

[Kimintiri]

I went ahead and adjusted the table to be larger, but it still caused the frame to be disjointed (just caused it to shift to the left). I also added the overflow tag to the body, but that does not appear to have changed anything.

I also went ahead and just eliminated the width attribute for the table, since it is not necessary.

[molendijk]

The problem is caused by an iframed page having tables within a main page having tables too.
Get rid of the table containing your iframe and replace it (=table+iframe) with something like this:

<div style="position: relative; top:-5px; width: 870px; overflow: auto; overflow-x: hidden; margin: auto; ">
<iframe style="position: relative; left:-2px; width: 889px; height: 550px; overflow-x:hidden; overflow-y: auto" frameborder="0" src="http://www.scorchedsand.net/Hawthorn/welcome.html"></iframe>
</div>
This is based on your page's source.

[Kimintiri]

That completely resolved the misalignment. The only other question that I have is how would I remove the top and bottom misalignment. There is a gap between the images above and below the frame.

[molendijk]

I don't know exactly what gaps you mean. If you add margin-top:-2px to the iframe's styles, the upper gap disappears. Is that what you mean?